/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — Podcast.ma Design System · Token Layer
   "Zellige" — modern minimal, Moroccan identity.

   LOADED FIRST, before main.css. Defines primitives + semantic tokens only.
   No component rules live here. Every text/background pair below is
   verified WCAG AA (4.5:1 body / 3:1 large + non-text).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   1. PRIMITIVES — the raw Moroccan palette. Never used directly in
   components; always consumed through a semantic token below.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Majorelle blue — Jardin Majorelle, Marrakech. The single brand accent. */
  --pm-majorelle-100: #EFECFF;
  --pm-majorelle-200: #D6CEFF;
  --pm-majorelle-300: #A99BFF;
  --pm-majorelle-400: #8B75F5;
  --pm-majorelle-500: #6C4EE8;
  --pm-majorelle-600: #5638C9;
  --pm-majorelle-700: #4B2FB5;
  --pm-majorelle-800: #35207F;

  /* Saffron / brass — souk spice + Fez metalwork. The single secondary. */
  --pm-saffron-200: #FBE7BC;
  --pm-saffron-300: #F5C761;
  --pm-saffron-400: #EDB13B;
  --pm-saffron-500: #D9932A;
  --pm-saffron-700: #8A5A11;

  /* Zellige green — the classic Fez tile green. Status: success / live-ok. */
  --pm-zellige-300: #6FD3BB;
  --pm-zellige-400: #3FBFA4;
  --pm-zellige-600: #128A72;
  --pm-zellige-700: #0A6F5C;

  /* Terracotta — Marrakech pisé walls. Status: danger / live / recording. */
  --pm-terracotta-300: #F0A48D;
  --pm-terracotta-400: #F0836A;
  --pm-terracotta-600: #C94A2E;
  --pm-terracotta-700: #B33A22;

  /* Warm neutrals — tadelakt plaster (light) / Atlas night (dark). */
  --pm-night-900: #08080F;
  --pm-night-850: #0E0E17;
  --pm-night-800: #171722;
  --pm-night-750: #1F1F2C;
  --pm-night-700: #2C2C3C;
  --pm-night-600: #3D3D52;
  --pm-night-500: #6E6C8A;
  --pm-night-300: #918FA8;
  --pm-night-200: #B9B7CB;
  --pm-night-050: #F3F2F8;

  --pm-plaster-000: #FFFFFF;
  --pm-plaster-050: #FBF8F3;
  --pm-plaster-100: #F2ECE1;
  --pm-plaster-200: #E4DBCC;
  --pm-plaster-300: #CBBFAB;
  --pm-plaster-500: #8C806D;
  --pm-plaster-700: #6E6678;
  --pm-plaster-800: #514A5C;
  --pm-plaster-900: #1A1622;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY
   Latin: Inter (already loaded — no new request).
   Arabic: IBM Plex Sans Arabic. Because Inter carries no Arabic glyphs the
   browser falls through per-glyph, so Arabic renders correctly even inside
   a French or English page (podcast titles, guest names) — not only in
   RTL mode. Arabic needs more leading than Latin: see --lh-* overrides.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --font-sans: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system,
               'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Back-compat: main.css / admin.css / inline styles all use var(--font). */
  --font: var(--font-sans);

  /* Modular scale — 1.150 at UI sizes, fluid at display sizes.
     Replaces the 25 ad-hoc font-sizes measured on the live site. */
  --fs-3xs:     0.6875rem;  /* 11px — legal, ad labels */
  --fs-2xs:     0.75rem;    /* 12px — meta, counts */
  --fs-xs:      0.8125rem;  /* 13px — captions */
  --fs-sm:      0.875rem;   /* 14px — secondary UI */
  --fs-md:      1rem;       /* 16px — body */
  --fs-lg:      1.125rem;   /* 18px — lead */
  --fs-xl:      1.375rem;   /* 22px — section titles */
  --fs-2xl:     1.75rem;    /* 28px — page titles */
  --fs-3xl:     clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  --fs-display: clamp(2.125rem, 1.1rem + 4.6vw, 4rem);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --ls-tight:  -0.02em;
  --ls-tighter:-0.03em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-widest:  0.1em;
}

/* Arabic script needs ~20% more leading and no negative tracking. */
[lang="ar"], [dir="rtl"] {
  --lh-tight:   1.4;
  --lh-snug:    1.5;
  --lh-normal:  1.85;
  --lh-relaxed: 2;
  --ls-tight:   0;
  --ls-tighter: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. SPACE — 4px base grid
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --sp-0:  0;
  --sp-1:  0.25rem;  /*  4 */
  --sp-2:  0.5rem;   /*  8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.25rem;  /* 20 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */

  /* Page gutter — one value, responsive, used by every full-width block. */
  --gutter: 1rem;
  --content-max: 1360px;

  /* Minimum interactive size (WCAG 2.5.8 / Apple HIG). */
  --tap-min: 44px;
}
@media (min-width: 768px)  { :root { --gutter: 1.5rem; } }
@media (min-width: 1280px) { :root { --gutter: 2rem;   } }

/* ──────────────────────────────────────────────────────────────────────────
   4. RADII / SHADOWS / MOTION
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* Back-compat aliases consumed by main.css / design-v2.css / ads.css. */
  --radius-sm:   var(--r-sm);
  --radius:      var(--r-md);
  --radius-lg:   var(--r-xl);
  --card-radius: 16px;

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --transition:  var(--dur-2) var(--ease-out);

  /* Z-INDEX SCALE — these are ALIASES of the values already shipping.
     Do not renumber: the player, drawer, bottom nav, search overlay, radio
     room and AdSense anchor all coordinate through these exact integers. */
  --z-below:          -1;
  --z-base:            0;
  --z-raised:          2;
  --z-sticky:        100;
  --z-ads-anchor:    455;   /* ads.css   — must stay below player + nav */
  --z-player:        470;   /* mobile.css .player-bar */
  --z-header:        500;   /* mobile.css .site-header */
  --z-drawer-scrim:  590;   /* mobile.css .drawer-overlay */
  --z-drawer:        600;   /* mobile.css .app-drawer / #bottom-nav */
  --z-bottom-nav:    600;
  --z-search-overlay:700;   /* mobile.css .mobile-search-overlay */
  --z-modal:         800;   /* mobile.css .modal-overlay */
  --z-radio-room:    900;   /* design-v2.css .radio-room */
  --z-toast:        1100;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. SEMANTIC TOKENS — DARK (default)
   Contrast verified against --surface and --surface-raised.
   ────────────────────────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
  color-scheme: dark;

  --surface:          var(--pm-night-850);   /* page */
  --surface-sunken:   var(--pm-night-900);   /* wells, inset rows */
  --surface-raised:   var(--pm-night-800);   /* cards */
  --surface-overlay:  var(--pm-night-750);   /* menus, sheets, modals */
  --surface-glass:    rgba(14, 14, 23, .82); /* header / nav blur */
  --surface-inverse:  var(--pm-plaster-050);

  --border:             var(--pm-night-700);
  --border-strong:      var(--pm-night-600);
  --border-interactive: var(--pm-night-500); /* 3.82:1 — inputs, controls */

  --text-primary:   var(--pm-night-050);  /* 17.25:1 */
  --text-secondary: var(--pm-night-200);  /*  9.78:1 */
  --text-muted:     var(--pm-night-300);  /*  6.12:1 */
  --text-on-accent: #FFFFFF;              /*  5.39:1 on accent */
  --text-on-media:  #FFFFFF;              /* over the card scrim */

  --accent:          var(--pm-majorelle-500);
  --accent-hover:    var(--pm-majorelle-400);
  --accent-text:     var(--pm-majorelle-300);  /* 8.06:1 — links on dark */
  --accent-soft:     rgba(108, 78, 232, .18);
  --accent-ring:     rgba(169, 155, 255, .55);

  --secondary:       var(--pm-saffron-400);
  --secondary-text:  var(--pm-saffron-300);    /* 12.09:1 */
  --secondary-soft:  rgba(237, 177, 59, .16);
  --text-on-secondary: #1A1200;                /* 9.69:1 */

  --success:      var(--pm-zellige-400);   /* 8.41:1 */
  --success-soft: rgba(63, 191, 164, .16);
  --danger:       var(--pm-terracotta-400);/* 7.46:1 */
  --danger-soft:  rgba(240, 131, 106, .16);

  --scrim:      rgba(4, 4, 10, .72);
  --media-scrim:linear-gradient(to top, rgba(4,4,10,.95) 0%,
                                        rgba(4,4,10,.80) 34%,
                                        rgba(4,4,10,.28) 64%,
                                        rgba(4,4,10,0)   100%);

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 4px 16px rgba(0,0,0,.45);
  --shadow-3: 0 12px 36px rgba(0,0,0,.55);
  --shadow-4: 0 24px 64px rgba(0,0,0,.62);
  --shadow-accent: 0 10px 30px rgba(108, 78, 232, .28);

  /* Motif ink — the zellige lattice stroke colour for this theme. */
  --motif-ink: rgba(169, 155, 255, .26);

  /* Back-compat aliases for main.css / design-v2.css / admin.css. */
  --bg-primary:    var(--surface);
  --bg-secondary:  var(--surface-raised);
  --bg-card:       var(--surface-raised);
  --bg-card-hover: var(--surface-overlay);
  --bg-input:      var(--surface-sunken);
  --border-hover:  var(--border-strong);
  --accent-2:      var(--secondary);
  --accent-warm:   var(--secondary);
  --accent-red:    var(--danger);
  --accent-green:  var(--success);
  --glass-bg:      var(--surface-glass);
  --glass-border:  var(--border);
  --gradient:      linear-gradient(135deg, var(--pm-majorelle-400), var(--pm-majorelle-600));
  --gradient-warm: linear-gradient(135deg, var(--pm-saffron-300), var(--pm-terracotta-400));
  --glow:          var(--shadow-accent);
  --glow-purple:   var(--shadow-accent);
  --glow-cyan:     var(--shadow-3);
  --shadow:        var(--shadow-2);
  --shadow-lg:     var(--shadow-4);
}

/* ──────────────────────────────────────────────────────────────────────────
   6. SEMANTIC TOKENS — LIGHT
   Rebuilt on the same token names, so every component gets a real light
   theme for free instead of the partial re-skin that shipped before.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --surface:          var(--pm-plaster-050);
  --surface-sunken:   var(--pm-plaster-100);
  --surface-raised:   var(--pm-plaster-000);
  --surface-overlay:  var(--pm-plaster-000);
  --surface-glass:    rgba(251, 248, 243, .86);
  --surface-inverse:  var(--pm-night-850);

  --border:             var(--pm-plaster-200);
  --border-strong:      var(--pm-plaster-300);
  --border-interactive: var(--pm-plaster-500);  /* 3.65:1 */

  --text-primary:   var(--pm-plaster-900);  /* 16.77:1 */
  --text-secondary: var(--pm-plaster-800);  /*  7.98:1 */
  --text-muted:     var(--pm-plaster-700);  /*  5.17:1 */
  --text-on-accent: #FFFFFF;                /*  7.49:1 on accent */
  --text-on-media:  #FFFFFF;

  --accent:          var(--pm-majorelle-600);
  --accent-hover:    var(--pm-majorelle-700);
  --accent-text:     var(--pm-majorelle-700);  /* 8.35:1 */
  --accent-soft:     rgba(86, 56, 201, .10);
  --accent-ring:     rgba(86, 56, 201, .45);

  --secondary:       var(--pm-saffron-500);
  --secondary-text:  var(--pm-saffron-700);    /* 5.58:1 */
  --secondary-soft:  rgba(217, 147, 42, .14);
  --text-on-secondary: #1A1200;

  --success:      var(--pm-zellige-700);   /* 5.76:1 */
  --success-soft: rgba(10, 111, 92, .12);
  --danger:       var(--pm-terracotta-700);/* 5.59:1 */
  --danger-soft:  rgba(179, 58, 34, .10);

  --scrim:      rgba(26, 22, 34, .48);
  --media-scrim:linear-gradient(to top, rgba(12,10,20,.95) 0%,
                                        rgba(12,10,20,.80) 34%,
                                        rgba(12,10,20,.28) 64%,
                                        rgba(12,10,20,0)   100%);

  --shadow-1: 0 1px 2px rgba(26,22,34,.06);
  --shadow-2: 0 4px 16px rgba(26,22,34,.08);
  --shadow-3: 0 12px 32px rgba(26,22,34,.10);
  --shadow-4: 0 24px 56px rgba(26,22,34,.14);
  --shadow-accent: 0 10px 26px rgba(86, 56, 201, .18);

  --motif-ink: rgba(86, 56, 201, .16);

  --bg-primary:    var(--surface);
  --bg-secondary:  var(--surface-sunken);
  --bg-card:       var(--surface-raised);
  --bg-card-hover: var(--surface-sunken);
  --bg-input:      var(--pm-plaster-000);
  --border-hover:  var(--border-strong);
  --accent-2:      var(--secondary);
  --accent-warm:   var(--secondary);
  --accent-red:    var(--danger);
  --accent-green:  var(--success);
  --glass-bg:      var(--surface-glass);
  --glass-border:  var(--border);
  --gradient:      linear-gradient(135deg, var(--pm-majorelle-600), var(--pm-majorelle-800));
  --gradient-warm: linear-gradient(135deg, var(--pm-saffron-500), var(--pm-terracotta-600));
  --glow:          var(--shadow-accent);
  --glow-purple:   var(--shadow-accent);
  --glow-cyan:     var(--shadow-3);
  --shadow:        var(--shadow-2);
  --shadow-lg:     var(--shadow-4);
}

/* ──────────────────────────────────────────────────────────────────────────
   7. THE ZELLIGE MOTIF
   An 8-pointed khatem star lattice (two overlapping squares + centre
   diamond, with edge stubs so tiles interlock). Inline SVG data-URI:
   ~430 bytes, zero network requests, colour-controlled by --motif-ink.

   RULES OF USE
     · Only on large flat areas: hero backdrop, page-hero, footer cap,
       empty states, section rule.
     · Never behind podcast cover art and NEVER inside an ad container —
       .ads-unit and its children explicitly opt out in design-system.css.
     · Always <= 0.05 effective opacity over content areas.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --motif-size: 52px;
  --motif-zellige:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Crect x='11' y='11' width='30' height='30'/%3E%3Crect x='11' y='11' width='30' height='30' transform='rotate(45 26 26)'/%3E%3Crect x='18.5' y='18.5' width='15' height='15' transform='rotate(45 26 26)'/%3E%3Cpath d='M0 26h4.8M47.2 26H52M26 0v4.8M26 47.2V52'/%3E%3C/g%3E%3C/svg%3E");
}