/* ==========================================================================
   Concept Media — Design Tokens  (Milestone 1)
   Source of truth for colour, type, space, radius, motion and layout.
   Portable: this file is copied verbatim into the WordPress theme
   (wp-content/themes/concept-media/assets/css/tokens.css).
   Documentation: docs/01-design-system.md
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL 1.1) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/poppins/poppins-latin-200-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins/poppins-latin-800-normal.woff2") format("woff2"); }

/* Arabic — recommended free substitute for Aktiv Grotesk Arabic (see docs/01 §3.2) */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-200-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-300-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* Arabic — alternative candidate, shown in the specimen for comparison only */
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/noto-kufi-arabic/noto-kufi-arabic-arabic-300-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-kufi-arabic/noto-kufi-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-kufi-arabic/noto-kufi-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-kufi-arabic/noto-kufi-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/noto-kufi-arabic/noto-kufi-arabic-arabic-800-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  /* ---------- 1. Colour — brand primitives (identity guide p.15) ---------- */
  --cm-black:  #040404;   /* "Stage" — primary background */
  --cm-white:  #FFFFFF;   /* "Light" — primary text on stage */
  --cm-orange: #FF5C00;   /* "Ember" — PROVISIONAL accent, pending client confirmation */

  /* Neutral ramp derived from #040404 (tints only, no hue shift) */
  --cm-ink-950: #040404;
  --cm-ink-900: #0A0A0A;
  --cm-ink-850: #111111;
  --cm-ink-800: #181818;
  --cm-ink-700: #242424;
  --cm-ink-600: #333333;
  --cm-ink-500: #4D4D4D;
  --cm-ink-400: #737373;
  --cm-ink-300: #9A9A9A;  /* minimum for body-size text on --cm-black (6.9:1) */
  --cm-ink-200: #C7C7C7;
  --cm-ink-100: #EBEBEB;
  --cm-ink-050: #F5F5F5;

  /* Ember ramp — accessibility derivatives of the provisional accent */
  --cm-orange-ink:  #C24100;  /* orange TEXT on white (5.2:1). Never use #FF5C00 for small text on white (3.1:1). */
  --cm-orange-glow: #FF7A2E;  /* hover / highlight on dark only */
  --cm-orange-deep: #5A1F00;  /* gradient mid-stop */

  /* ---------- 2. Colour — semantic roles ---------- */
  --color-bg:            var(--cm-black);
  --color-bg-raised:     var(--cm-ink-850);
  --color-bg-sunken:     var(--cm-ink-900);
  --color-surface-light: var(--cm-white);
  --color-text:          var(--cm-white);
  --color-text-muted:    var(--cm-ink-300);
  --color-text-subtle:   var(--cm-ink-400);  /* large/decorative text only (≈4.3:1 on black) */
  --color-text-inverse:  var(--cm-black);
  --color-accent:        var(--cm-orange);
  --color-accent-text-on-light: var(--cm-orange-ink);
  --color-on-accent:     var(--cm-black);    /* black on #FF5C00 = 6.6:1 (AA). White on #FF5C00 = 3.1:1 → large text only. */
  --color-line:          rgba(255, 255, 255, 0.14);
  --color-line-strong:   rgba(255, 255, 255, 0.32);
  --color-focus:         var(--cm-orange);
  --color-scrim:         rgba(4, 4, 4, 0.72);

  /* Brand gradient (identity guide p.16): black → orange, linear, order never reversed */
  --gradient-ember: linear-gradient(135deg, var(--cm-black) 38%, var(--cm-orange-deep) 72%, var(--cm-orange) 100%);
  --gradient-ember-rise: linear-gradient(0deg, rgba(255, 92, 0, 0.55) 0%, rgba(90, 31, 0, 0.25) 35%, rgba(4, 4, 4, 0) 70%);
  --gradient-stage-light: radial-gradient(60% 55% at 50% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 70%);

  /* ---------- 3. Typography ---------- */
  --font-latin:  "Poppins", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body:   var(--font-latin);
  --font-display: var(--font-latin);

  --weight-thin:     200;  /* the "MEDIA" voice */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;  /* the "CONCEPT" voice */
  --weight-black:    800;

  /* Fluid type scale — 360px → 1600px viewport */
  --text-display-xl: clamp(3.25rem, 1.6rem + 7.4vw, 11.5rem);
  --text-display-l:  clamp(2.6rem, 1.55rem + 4.7vw, 7.25rem);
  --text-h1:         clamp(2.15rem, 1.5rem + 2.9vw, 4.5rem);
  --text-h2:         clamp(1.75rem, 1.35rem + 1.8vw, 3.125rem);
  --text-h3:         clamp(1.25rem, 1.12rem + 0.6vw, 1.75rem);
  --text-lead:       clamp(1.125rem, 1.02rem + 0.45vw, 1.5rem);
  --text-body:       clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --text-small:      0.875rem;
  --text-label:      0.75rem;

  --leading-display: 0.92;
  --leading-heading: 1.08;
  --leading-snug:    1.3;
  --leading-body:    1.65;

  --tracking-display: -0.045em;
  --tracking-heading: -0.025em;
  --tracking-body:    0;
  --tracking-label:   0.18em;

  --measure: 62ch;
  --measure-narrow: 44ch;

  /* ---------- 4. Space (4px base) ---------- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 12rem;    /* 192 */

  /* Fluid rhythm */
  --space-section: clamp(4.5rem, 2.6rem + 6.5vw, 9.5rem);   /* tightened after homepage review */
  --space-block:   clamp(2.5rem, 1.7rem + 3.4vw, 5.5rem);
  --space-stack:   clamp(1.25rem, 1rem + 1vw, 2rem);

  /* ---------- 5. Layout ---------- */
  --page-max:     1680px;
  --page-gutter:  clamp(1rem, 0.4rem + 3.6vw, 5rem);   /* outer margin; 16px minimum on phones */
  --grid-columns: 12;
  --grid-gap:     clamp(1rem, 0.7rem + 1.2vw, 2rem);
  --header-h:     clamp(4rem, 3.4rem + 1.6vw, 5.5rem);

  /* ---------- 6. Shape ---------- */
  --radius-s:    8px;
  --radius-m:    16px;
  --radius-l:    28px;     /* identity guide cards use large soft corners */
  --radius-pill: 999px;
  --border-hair: 1px solid var(--color-line);

  /* ---------- 7. Elevation (used sparingly — the stage is lit, not stacked) ---------- */
  --shadow-lift: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --glow-ember:  0 0 0 1px rgba(255, 92, 0, 0.35), 0 20px 60px -20px rgba(255, 92, 0, 0.45);

  /* ---------- 8. Motion ---------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);      /* "expo out" — reveals, arrivals */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);     /* transitions between states */
  --ease-curtain:  cubic-bezier(0.77, 0, 0.18, 1);     /* signature: stage curtain / mask wipes */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);         /* UI micro-interactions */

  --dur-micro:     160ms;   /* hover, focus, toggles */
  --dur-ui:        320ms;   /* menus, accordions */
  --dur-reveal:    800ms;   /* section entrances */
  --dur-cinematic: 1400ms;  /* signature moments only */

  --stagger:       70ms;
  --reveal-distance: 28px;

  /* Writing-direction multiplier for horizontal motion (flipped under [dir="rtl"]) */
  --dir: 1;

  /* ---------- 9. Layers ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-skip: 1000;
}

/* ---------- Arabic / RTL overrides ---------- */
:root:lang(ar),
[lang="ar"] {
  --font-body:    var(--font-arabic);
  --font-display: var(--font-arabic);

  /* Arabic never takes letter-spacing — it breaks joining. */
  --tracking-display: 0;
  --tracking-heading: 0;
  --tracking-label:   0;

  /* Arabic needs vertical room for ascenders, dots and descenders */
  --leading-display: 1.18;
  --leading-heading: 1.3;
  --leading-snug:    1.5;
  --leading-body:    1.9;

  /* Plex Arabic sets optically smaller than Poppins at the same size */
  --text-display-xl: clamp(3rem, 1.5rem + 6.6vw, 10rem);
  --text-display-l:  clamp(2.5rem, 1.5rem + 4.4vw, 6.75rem);
  --text-body:       clamp(1.0625rem, 1.03rem + 0.14vw, 1.125rem);
  --text-label:      0.875rem;
}

[dir="rtl"] { --dir: -1; }

/* ---------- Reduced motion: collapse durations globally ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-ui: 1ms;
    --dur-reveal: 1ms;
    --dur-cinematic: 1ms;
    --stagger: 0ms;
    --reveal-distance: 0px;
  }
}