/* ==========================================================================
   tokens.css — the design tokens.
   Every colour, size, space and timing value lives here; components only
   reference these names, never raw numbers. Change a token, the site follows.
   ========================================================================== */

/* ---------- Fonts ----------
   The Noto Sans Arabic variable file was already in /static/fonts but never
   declared, so browsers never loaded it. "100 900" tells the browser the file
   contains every weight, so bold text is a real bold, not a faked one. */
@font-face {
    font-family: 'Noto Sans Arabic';
    src: url("../fonts/NotoSansArabic-VariableFont_wdth,wght.1f1510aef5d8.woff2") format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* ----- Colour: surfaces and text ----- */
    --paper:     #F6F2EA;   /* page background (warm paper) */
    --surface:   #FBF8F2;   /* cards, panels */
    --ink:       #1B1A17;   /* main text */
    --ink-soft:  #4A463F;   /* secondary text */
    --muted:     #6F6A5F;   /* hints, captions */
    --line:      #E2DBCD;   /* hairlines and borders */
    --night:     #14201F;   /* dark bands, footer, admin sidebar */

    /* ----- Colour: brand ----- */
    --teal-500:  #3FBAC2;   /* brand turquoise: fills and decoration only */
    --teal-700:  #1E6F76;   /* turquoise for text, links, focus (~5:1 on paper) */
    --teal-800:  #17565B;   /* hover / pressed */
    --teal-100:  #DDF1F2;   /* soft tint */
    --gold-500:  #B98B2A;   /* gold: decoration only */
    --gold-700:  #8A6416;   /* gold for text (~4.8:1 on paper) */

    /* ----- Colour: status ----- */
    --sale:      #9B2B32;
    --success:   #1F6B45;
    --warning:   #9A5B0C;

    /* ----- Old names -> new palette -----
       legacy.css still uses these 8 names in ~230 places. Pointing them at
       the new tokens restyles all of it without touching those rules. */
    --color-bg:          var(--paper);
    --color-card:        var(--surface);
    --color-text:        var(--ink);
    --color-accent:      var(--teal-700);
    --color-accent-dark: var(--teal-800);
    --color-gold:        var(--gold-500);
    --color-sale:        var(--sale);
    --color-border:      var(--line);

    /* ----- Typography ----- */
    --font-body:    'Vazirmatn', 'Noto Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
    --font-display: 'Estedad', 'Vazirmatn', 'Noto Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;

    --fs-xs:      0.8125rem;                                  /* 13px */
    --fs-sm:      0.9375rem;                                  /* 15px */
    --fs-base:    1.0625rem;                                  /* 17px: Persian reads small, so +1px */
    --fs-md:      1.25rem;
    --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    --fs-display: clamp(2.5rem, 1.2rem + 5.5vw, 5.5rem);      /* 40px phone -> 88px desktop */

    --lh-display: 1.25;
    --lh-heading: 1.4;
    --lh-body:    1.9;      /* Persian needs air for dots and marks above/below the line */

    /* ----- Spacing (4px base) ----- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
    --space-9: 96px;  --space-10: 144px;
    --section-space: clamp(4rem, 3rem + 4vw, 8rem);           /* vertical rhythm between sections */

    /* ----- Layout ----- */
    --container:   1320px;
    --page-margin: clamp(16px, 4vw, 48px);
    --gutter:      clamp(16px, 2vw, 24px);

    /* ----- Shape ----- */
    --radius-sm:   2px;
    --radius-md:   6px;
    --radius-full: 999px;

    /* ----- Elevation (warm-tinted, never pure grey) ----- */
    --shadow-1: 0 1px 2px rgba(27, 26, 23, 0.06), 0 1px 1px rgba(27, 26, 23, 0.04);
    --shadow-2: 0 8px 20px -6px rgba(27, 26, 23, 0.12), 0 2px 4px rgba(27, 26, 23, 0.05);
    --shadow-3: 0 28px 56px -14px rgba(27, 26, 23, 0.24);

    /* ----- Motion ----- */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* fast start, long gentle landing */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot: badges, hearts */
    --dur-micro: 150ms;   /* hovers, presses */
    --dur-base:  280ms;   /* menus, drawers, accordions */
    --dur-large: 600ms;   /* image reveals, page-level moves */

    /* ----- Stacking order ----- */
    --z-header: 100;
    --z-drawer: 300;
    --z-modal:  400;
    --z-toast:  500;
}