/* ============================================================
   MANAII — DESIGN TOKENS
   The ONLY approved values. Source: 01_DESIGN_SYSTEM/DESIGN-TOKENS.md.
   No component may introduce a colour, radius, shadow or type size
   that is not defined here. Change a value here, not in a component.
   ============================================================ */

:root {
  /* ---- 1. Colour — brand ---- */
  --color-cream:        #FFF6DC;
  --color-teal:         #00A693;
  --color-teal-deep:    #0E9C88;
  --color-green-dark:   #06493A;
  --color-burgundy:     #701C1C;
  --color-yellow:       #FDCC04;
  --color-gold:         #F5C100;
  --color-pink:         #FE28A2;
  --color-plum:         #7A1F5E;

  /* ---- Ink and surfaces ---- */
  --color-ink:          #252525;
  --color-ink-soft:     #3F3A2E;
  --color-ink-muted:    #5C574B;
  --color-muted:        #6E6A5E;
  --color-muted-light:  #8A8577;
  --color-muted-faint:  #A39C89;
  --color-white:        #FFFFFF;
  --color-tint-sand:    #FDF0CE;
  --color-grey-panel:   #F4F4F4;
  --color-media-bg:     #EADFBE;

  /* ---- Borders and rules ---- */
  --border-hairline:    #E4DCC2;
  --border-input:       #D8CDA8;
  --border-card:        #ECE4CE;
  --border-row:         #EFE7CF;
  --rule-dashed:        1px dashed #E0D8BE;
  --timeline-axis:      #DCD3B6;

  /* ---- Semantic state pills (the complete vocabulary) ---- */
  --pill-avail-bg:      #E6F5F1;  --pill-avail-fg:      #0E7A6B;
  --pill-unavail-bg:    #FBEAEA;  --pill-unavail-fg:    #C0392B;
  --pill-pending-bg:    #FDF0CE;  --pill-pending-fg:    #6E5A12;
  --pill-audience-bg:   #F7E9F2;  --pill-audience-fg:   #9B2D72;
  --pill-order-done-bg: #EDF3E9;  --pill-order-done-fg: #4A6B33;
  --color-danger:       #C0392B;

  /* ---- Diamond marker family colours ---- */
  --diamond-nowruz:     #F5C100;  /* gold */
  --diamond-yalda:      #C0392B;  /* burgundy */
  --diamond-magazine:   #0E9C88;  /* teal */

  /* ---- 2. Typography ---- */
  --font-sans: Vazirmatn, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-display-xl: clamp(46px, 5vw, 72px);
  --fs-display:    clamp(40px, 4.4vw, 60px);
  --fs-h1:         44px;
  --fs-h2:         38px;
  --fs-h3:         26px;
  --fs-h4:         20px;
  --fs-lead:       19px;
  --fs-body:       17px;
  --fs-small:      15px;
  --fs-caption:    13px;
  --fs-kicker:     14px;
  --fs-price:      22px;
  --fs-chapter:    clamp(56px, 6vw, 88px);
  --lh-prose:      1.9;   /* Persian prose never below this */
  --lh-prose-loose:2.1;
  --lh-heading:    1.35;

  /* ---- 3. Spacing (4px base) ---- */
  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px;
  --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-72: 72px;
  --sp-96: 96px; --sp-120: 120px; --sp-140: 140px;
  --section-rhythm: 120px;   /* marketing pages; commerce runs denser via .is-commerce */
  --section-rhythm-brand: 140px;

  /* ---- 4. Layout & containers ---- */
  --container:      1180px;
  --container-read:  720px;
  --gutter:          40px;   /* desktop; responsive layer steps this down */

  /* ---- 5. Geometry ---- */
  --radius-pill:      999px;
  --radius-card:       24px;
  --radius-media:      20px;
  --radius-media-sm:   18px;
  --radius-row:        14px;
  --radius-chip:       12px;
  --radius-input:      999px;
  --radius-input-sq:    8px;
  --radius-mobile-card:20px;

  /* ---- Shadows ---- */
  --shadow-card:   0 10px 30px rgba(37,37,37,.06);
  --shadow-card-2: 0 10px 34px rgba(37,37,37,.07);
  --shadow-panel:  0 10px 40px rgba(37,37,37,.08);
  --shadow-float:  0 14px 40px rgba(37,37,37,.14);
  --shadow-modal:  0 22px 60px rgba(37,37,37,.18);
  --shadow-drawer: -18px 0 50px rgba(37,37,37,.22);
  --shadow-player: 0 -10px 40px rgba(6,73,58,.28);

  /* ---- 11. Motion ---- */
  --ease: ease;
  --ease-out: ease-out;
  --dur-color: 180ms;
  --dur-lift: 180ms;
  --dur-media: 400ms;
  --dur-fade: 160ms;
  --dur-drawer: 240ms;
  --dur-expand: 280ms;

  /* ---- z-index contract (RESPONSIVE-SPEC §8) ---- */
  --z-announce: 110;
  --z-header: 100;
  --z-search: 97;
  --z-account: 96;
  --z-mega: 92;
  --z-mini-player: 120;
  --z-sheet-backdrop: 125;
  --z-drawer: 130;
  --z-expanded: 140;

  /* ---- Focus (RELEASE BLOCKER — the design carries none) ---- */
  --focus-ring: 2px solid #0E9C88;
  --focus-offset: 2px;
}