/* ============================================================
   AD HOLIC — design tokens
   "The Signal": a near-black plum void carrying one neon ribbon
   that runs magenta → indigo → royal. Every colour below is the
   brand's own — the three official hexes from the logo sheet, and
   the lifted variants needed to clear contrast on a dark ground.
   ============================================================ */

:root {
  /* ---- The brand's official three (logo sheet) ----
     Kept verbatim so print and web never drift apart. The site
     rarely paints with them directly — see the lifted set below. */
  --brand-blue:    #135DB7;
  --brand-plum:    #280628;
  --brand-magenta: #BE1565;

  /* ---- Surfaces. Never pure #000: the plum keeps it a lit room. ---- */
  --void:       #130714;   /* page ground                            */
  --plum:       #1d0b22;   /* cards, raised panels                   */
  --plum-high:  #2b1136;   /* hairlines, borders, inputs             */
  --plum-lift:  #3a1748;   /* hover on a raised panel                */

  /* ---- The ribbon. The logo's gradient, split into stops. ----
     Each is lifted off the print hex so it survives a dark ground:
     --magenta is #BE1565 opened up, --royal is #135DB7 opened up. */
  --magenta:        #e91d7f;
  --magenta-soft:   #ff5aa8;   /* 6.9:1 on --void — safe for text    */
  --indigo:         #232268;
  --indigo-bright:  #4b48c7;
  --royal:          #2e7fe8;
  --royal-soft:     #6fb0ff;   /* 7.4:1 on --void — safe for text    */

  --ribbon: linear-gradient(92deg,
    var(--magenta) 8%, var(--indigo-bright) 48%, var(--royal) 88%);
  --ribbon-120: linear-gradient(120deg,
    var(--magenta), var(--indigo-bright), var(--royal));

  /* ---- Text ---- */
  --ice:      #f6f1f8;   /* 16.8:1 — headings, body                  */
  --lilac:    #b8a6c9;   /*  8.7:1 — secondary copy                  */
  --lilac-dim:#8d7ba0;   /*  5.1:1 — micro-labels only               */

  /* ---- Type ----
     Fraunces is a display serif with a real italic and an optical
     size axis — it carries the brand's editorial voice. Manrope is
     the workhorse. Cinzel Decorative Black is the wordmark, and is
     used for nothing else. Cairo carries the whole Arabic side. */
  --font-display: "Fraunces", "Cairo", Georgia, serif;
  --font-body:    "Manrope", "Cairo", system-ui, -apple-system, sans-serif;
  --font-mark:    "Cinzel Decorative", "Fraunces", serif;

  /* ---- Type scale ---- */
  --fs-micro: 0.6875rem;   /* 11px — tracked eyebrows */
  --fs-xs:    0.8125rem;
  --fs-sm:    0.9375rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.375rem;
  --fs-2xl:   clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem);
  --fs-3xl:   clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem);
  --fs-hero:  clamp(2.8rem, 1.2rem + 8vw, 6.8rem);

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-body:  1.68;

  --tr-eyebrow: 0.32em;   /* eyebrows are spaced like a signal band */
  --tr-tight:  -0.02em;

  /* ---- Spacing (4/8 rhythm) ---- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;   --s-10:128px;  --s-11:176px;

  --section-y: clamp(72px, 9vw, 160px);
  --gutter:    clamp(20px, 4.5vw, 64px);
  --maxw:      1280px;
  --maxw-text: 62ch;

  /* ---- Radii — soft and full-round. The counterweight to the
         hard neon; nothing on this page has a sharp corner. ---- */
  --r-1: 8px;
  --r-2: 16px;
  --r-3: 24px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 12px 32px -12px rgba(0,0,0,.75);
  --sh-3: 0 32px 72px -28px rgba(0,0,0,.9);
  --glow-magenta: 0 0 32px rgba(233,29,127,.4), 0 0 72px rgba(233,29,127,.16);
  --glow-royal:   0 0 32px rgba(46,127,232,.35);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);     /* expo.out — entering */
  --ease-in:   cubic-bezier(.7, 0, .84, 0);      /* exiting             */
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);  /* the node pop        */
  --dur-1: 180ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
  --dur-4: 800ms;

  /* ---- Layers ----
     The header sits ABOVE the drawer on purpose: the burger becomes the
     drawer's close button, so if the panel covered it the only way out
     would be the Escape key — which a phone does not have. */
  --z-ambient:  0;
  --z-drawer:  70;
  --z-header:  75;
  --z-grain:   80;
  --z-modal:   95;
  --z-boot:   100;
  --z-toast:  120;

  --header-h: 76px;
}

/* Arabic runs entirely on Cairo. It has no italic and dislikes the
   wide Latin letterspacing, so the accent treatment becomes colour
   alone and the tracked eyebrows relax to something Arabic can wear. */
:root[data-lang="ar"] {
  --font-display: "Cairo", "Fraunces", sans-serif;
  --font-body:    "Cairo", system-ui, sans-serif;
  --tr-eyebrow: 0.12em;
  --tr-tight: 0;
  --lh-tight: 1.28;
  --lh-snug:  1.42;
}

@media (max-width: 860px) { :root { --header-h: 64px; } }