/*
 * Design tokens shared by the storefront and the admin panel.
 * The storefront layers a warm, paper-like artisan palette on top of these;
 * the admin panel uses the same scale but a cooler, denser skin.
 */

:root {
    /* Warm neutrals — the "paper" the shop is printed on */
    --paper: #faf7f2;
    --paper-raised: #ffffff;
    --paper-sunk: #f2ece3;
    --paper-edge: #e6ddd0;

    /* Ink */
    --ink: #241f1b;
    --ink-soft: #5b524a;
    --ink-faint: #8a7f74;

    /* Accents — clay, sage, honey. Chosen to read as hand-made rather than corporate. */
    --clay: #b4552d;
    --clay-dark: #96431f;
    --clay-tint: #f6e9e1;
    --sage: #6f7f62;
    --sage-tint: #eaeee5;
    --honey: #c08a2e;
    --honey-tint: #f8f0dd;

    /* Status */
    --success: #4a7c59;
    --success-tint: #e6f0e8;
    --warning: #b07d18;
    --warning-tint: #fbf1da;
    --danger: #a3372c;
    --danger-tint: #f8e6e3;
    --info: #3c6478;
    --info-tint: #e4eef3;

    /* Typography */
    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* A modular type scale, fluid between mobile and desktop */
    --text-xs: 0.78rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
    --text-3xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
    --text-4xl: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Shape and depth — soft, low-contrast shadows suit a craft aesthetic */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(36, 31, 27, 0.06);
    --shadow: 0 2px 8px rgba(36, 31, 27, 0.08);
    --shadow-lg: 0 10px 30px rgba(36, 31, 27, 0.12);

    --transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);

    /* Height of the sticky site header. Shared so a full-screen hero can subtract it and the
       two together come to exactly one viewport. */
    --header-height: 72px;

    /* Admin skin */
    --admin-bg: #f4f5f7;
    --admin-surface: #ffffff;
    --admin-border: #dfe3e8;
    --admin-sidebar: #241f1b;
    --admin-sidebar-hover: #372f28;
    --admin-sidebar-text: #cfc6bc;
    --admin-sidebar-active: #b4552d;
}

/* Honour the reader's motion preference everywhere, not per-component. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* A single, visible focus treatment for the whole application. */
:focus-visible {
    outline: 3px solid var(--clay);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.visually-hidden-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
}