/* RAABIH PA — "Living Light" design tokens (F2).
   Everything visual is a custom property. Dark is the default; Daylight is
   [data-theme="light"]; [data-theme="auto"] follows the OS.
   NOTE for builders: never hard-code a colour in a view — use these tokens.
   The light block appears twice (explicit + auto). Keep the two in sync. */

/* ── Fonts (vendored, offline) ─────────────────────────────────────────── */
@font-face { font-family: 'Syne'; src: url('/vendor/fonts/syne-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/vendor/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/vendor/fonts/hanken-grotesk-latin-wght-italic.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/vendor/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amiri'; src: url('/vendor/fonts/amiri-arabic-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Amiri'; src: url('/vendor/fonts/amiri-arabic-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
  color-scheme: dark;
  --is-light: 0;                       /* read by orb.js / fx.js via getComputedStyle */

  /* ── Type ── */
  --font-display: 'Syne', 'Hanken Grotesk', sans-serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI Variable Text', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --font-arabic: 'Amiri', 'Traditional Arabic', serif;
  --fs-hero: clamp(2.6rem, 1.6rem + 3.6vw, 4.75rem);
  --fs-h1: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body: 0.9375rem;                /* 15px */
  --fs-sm: 0.8125rem;                  /* 13px */
  --fs-xs: 0.6875rem;                  /* 11px — mono labels only */
  --lh-body: 1.55;
  --lh-tight: 1.04;
  --lh-arabic: 1.9;
  --track-display: -0.02em;
  --track-label: 0.14em;

  /* ── Space (4px base) ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --tap: 44px;                         /* minimum touch target */
  --rail-w: 72px;
  --rail-w-open: 208px;
  --statebar-h: 64px;
  --dock-h: 68px;
  --context-w: 360px;
  --stage-max: 1320px;

  /* ── Radius ── */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* ── Motion ── */
  --d-instant: 90ms; --d-fast: 160ms; --d-base: 260ms; --d-slow: 420ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* crisp settle for toggles/checks. Real springs come from Motion (js/motion.js) — never an overshoot bezier */
  --ease-snap: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: var(--ease-snap); /* legacy alias */

  /* ── Depth / z ── */
  --z-fx: 0; --z-stage: 1; --z-float: 40; --z-rail: 50; --z-dock: 50;
  --z-overlay: 80; --z-toast: 90; --z-cursor: 100;
  --blur-glass: 18px; --blur-heavy: 32px;

  /* ── Canvas (dark) ── */
  --void: #05060F;
  --deep: #0B0E1E;
  --raise: #12162B;                    /* solid fallback for glass */
  --raise-2: #1A1F3A;
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .075);
  --glass-hover: rgba(255, 255, 255, .095);
  --glass-solid: #11142A;              /* used when backdrop-filter is unsupported */
  --edge: rgba(255, 255, 255, .10);    /* 1px inner light border */
  --edge-strong: rgba(255, 255, 255, .20);
  --edge-top: rgba(255, 255, 255, .22);/* the lit top edge of glass */
  --scrim: rgba(3, 4, 12, .66);

  /* ── Text (dark) ── */
  --text: #EEEDFB;
  --text-2: #B9B8D6;
  --text-3: #9291B5;
  --text-on-prism: #07081A;

  /* ── Spectrum = meaning ── */
  --cyan: #2EE6FF;     --cyan-ink: #6FEFFF;     --cyan-glow: rgba(46, 230, 255, .42);    --cyan-soft: rgba(46, 230, 255, .12);
  --violet: #8B6CFF;   --violet-ink: #B5A2FF;   --violet-glow: rgba(139, 108, 255, .46); --violet-soft: rgba(139, 108, 255, .15);
  --gold: #FFC857;     --gold-ink: #FFD98A;     --gold-glow: rgba(255, 200, 87, .40);    --gold-soft: rgba(255, 200, 87, .12);
  --coral: #FF6B7A;    --coral-ink: #FF98A3;    --coral-glow: rgba(255, 107, 122, .42);  --coral-soft: rgba(255, 107, 122, .13);
  --emerald: #34F5B5;  --emerald-ink: #7CFAD0;  --emerald-glow: rgba(52, 245, 181, .38); --emerald-soft: rgba(52, 245, 181, .11);
  --magenta: #FF4FD8;  --magenta-ink: #FF93E7;  --magenta-glow: rgba(255, 79, 216, .42); --magenta-soft: rgba(255, 79, 216, .13);
  --amber: #FFAA3B;    --amber-ink: #FFC57A;    --amber-glow: rgba(255, 170, 59, .40);   --amber-soft: rgba(255, 170, 59, .13);
  /* lime = Lemon Mens Wear (retail). hue 80°: 40° from gold, 80° from emerald.
     --lime-ink contrast: 16.9:1 on --void, 15.7:1 on --glass, 13.5:1 on --glass-2 over --deep, 12.1:1 on --lime-soft */
  --lime: #B4F03C;     --lime-ink: #CDFA7E;     --lime-glow: rgba(180, 240, 60, .40);    --lime-soft: rgba(180, 240, 60, .12);

  --prism: linear-gradient(120deg, #2EE6FF 0%, #8B6CFF 36%, #FF4FD8 68%, #FFC857 100%);
  --prism-conic: conic-gradient(from 210deg, #2EE6FF, #8B6CFF, #FF4FD8, #FFC857, #34F5B5, #2EE6FF);
  --prism-soft: linear-gradient(120deg, rgba(46,230,255,.16), rgba(139,108,255,.16), rgba(255,79,216,.14), rgba(255,200,87,.14));

  /* semantic aliases */
  --accent: var(--violet); --accent-ink: var(--violet-ink);
  --ok: var(--emerald); --ok-ink: var(--emerald-ink); --ok-soft: var(--emerald-soft);
  --warn: var(--amber); --warn-ink: var(--amber-ink); --warn-soft: var(--amber-soft);
  --risk: var(--coral); --risk-ink: var(--coral-ink); --risk-soft: var(--coral-soft);
  --live: var(--magenta); --live-ink: var(--magenta-ink); --live-soft: var(--magenta-soft);
  --focus: #9FE9FF;
  --selection: rgba(139, 108, 255, .45);

  /* ── Shadow / light ── */
  --shadow-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0, 0, 0, .34);
  --shadow-2: 0 1px 0 rgba(255,255,255,.07) inset, 0 18px 50px rgba(0, 0, 0, .46);
  --shadow-3: 0 1px 0 rgba(255,255,255,.08) inset, 0 32px 90px rgba(0, 0, 0, .6);
  --shadow-glow: 0 0 0 1px rgba(139,108,255,.35), 0 10px 40px rgba(139,108,255,.28);
  --specular: rgba(255, 255, 255, .13);

  /* ── Aurora field ── */
  --aurora-1: rgba(46, 230, 255, .20);
  --aurora-2: rgba(139, 108, 255, .26);
  --aurora-3: rgba(255, 79, 216, .15);
  --aurora-4: rgba(255, 200, 87, .10);
  --star: rgba(226, 228, 255, .9);
  --grain-opacity: .055;
  --skeleton-a: rgba(255,255,255,.05);
  --skeleton-b: rgba(255,255,255,.12);
}

/* ── Daylight: warm pearl. Same tokens, re-lit — not an inversion. ───────── */
:root[data-theme="light"] {
  color-scheme: light;
  --is-light: 1;
  --void: #F3F1FA;
  --deep: #E9E5F6;
  --raise: #FCFBFF;
  --raise-2: #F0EDF9;
  --glass: rgba(255, 255, 255, .62);
  --glass-2: rgba(255, 255, 255, .80);
  --glass-hover: rgba(255, 255, 255, .92);
  --glass-solid: #FBFAFE;
  --edge: rgba(34, 24, 92, .11);
  --edge-strong: rgba(34, 24, 92, .24);
  --edge-top: rgba(255, 255, 255, .95);
  --scrim: rgba(40, 34, 84, .34);

  --text: #15122E;
  --text-2: #423E68;
  --text-3: #5D5985;
  --text-on-prism: #07081A;

  --cyan: #12BFDC;     --cyan-ink: #00647A;     --cyan-glow: rgba(18, 191, 220, .34);    --cyan-soft: rgba(18, 191, 220, .13);
  --violet: #6C4DF0;   --violet-ink: #4F32C8;   --violet-glow: rgba(108, 77, 240, .32);  --violet-soft: rgba(108, 77, 240, .11);
  --gold: #F2B533;     --gold-ink: #7C5200;     --gold-glow: rgba(242, 181, 51, .38);    --gold-soft: rgba(242, 181, 51, .17);
  --coral: #F0485B;    --coral-ink: #B3213A;    --coral-glow: rgba(240, 72, 91, .30);    --coral-soft: rgba(240, 72, 91, .11);
  --emerald: #12C48B;  --emerald-ink: #006B4E;  --emerald-glow: rgba(18, 196, 139, .32); --emerald-soft: rgba(18, 196, 139, .13);
  --magenta: #E22FBD;  --magenta-ink: #A3107F;  --magenta-glow: rgba(226, 47, 189, .30); --magenta-soft: rgba(226, 47, 189, .10);
  --amber: #F08C1A;    --amber-ink: #8C4A00;    --amber-glow: rgba(240, 140, 26, .32);   --amber-soft: rgba(240, 140, 26, .14);
  /* --lime-ink contrast: 6.3:1 on --void, 6.8:1 on --glass, 5.7:1 on --deep, 5.9:1 on --lime-soft (base --lime is for dots/borders, never text) */
  --lime: #65A30D;     --lime-ink: #3F6212;     --lime-glow: rgba(101, 163, 13, .30);    --lime-soft: rgba(101, 163, 13, .14);

  --prism: linear-gradient(120deg, #3FDDF5 0%, #9B84FF 36%, #FF7BE2 68%, #FFCB66 100%);
  --prism-soft: linear-gradient(120deg, rgba(18,191,220,.16), rgba(108,77,240,.14), rgba(226,47,189,.12), rgba(242,181,51,.16));
  --focus: #4F32C8;
  --selection: rgba(108, 77, 240, .26);

  --shadow-1: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 20px rgba(60, 44, 140, .09);
  --shadow-2: 0 1px 0 rgba(255,255,255,.95) inset, 0 16px 44px rgba(60, 44, 140, .14);
  --shadow-3: 0 1px 0 #fff inset, 0 30px 80px rgba(50, 36, 120, .22);
  --shadow-glow: 0 0 0 1px rgba(108,77,240,.30), 0 10px 36px rgba(108,77,240,.20);
  --specular: rgba(255, 255, 255, .75);

  --aurora-1: rgba(18, 191, 220, .22);
  --aurora-2: rgba(140, 110, 255, .22);
  --aurora-3: rgba(255, 110, 220, .18);
  --aurora-4: rgba(255, 196, 80, .24);
  --star: rgba(108, 77, 240, .0);
  --grain-opacity: .04;
  --skeleton-a: rgba(34,24,92,.06);
  --skeleton-b: rgba(34,24,92,.13);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --is-light: 1;
    --void: #F3F1FA; --deep: #E9E5F6; --raise: #FCFBFF; --raise-2: #F0EDF9;
    --glass: rgba(255, 255, 255, .62); --glass-2: rgba(255, 255, 255, .80); --glass-hover: rgba(255, 255, 255, .92);
    --glass-solid: #FBFAFE;
    --edge: rgba(34, 24, 92, .11); --edge-strong: rgba(34, 24, 92, .24); --edge-top: rgba(255, 255, 255, .95);
    --scrim: rgba(40, 34, 84, .34);
    --text: #15122E; --text-2: #423E68; --text-3: #5D5985; --text-on-prism: #07081A;
    --cyan: #12BFDC;     --cyan-ink: #00647A;     --cyan-glow: rgba(18, 191, 220, .34);    --cyan-soft: rgba(18, 191, 220, .13);
    --violet: #6C4DF0;   --violet-ink: #4F32C8;   --violet-glow: rgba(108, 77, 240, .32);  --violet-soft: rgba(108, 77, 240, .11);
    --gold: #F2B533;     --gold-ink: #7C5200;     --gold-glow: rgba(242, 181, 51, .38);    --gold-soft: rgba(242, 181, 51, .17);
    --coral: #F0485B;    --coral-ink: #B3213A;    --coral-glow: rgba(240, 72, 91, .30);    --coral-soft: rgba(240, 72, 91, .11);
    --emerald: #12C48B;  --emerald-ink: #006B4E;  --emerald-glow: rgba(18, 196, 139, .32); --emerald-soft: rgba(18, 196, 139, .13);
    --magenta: #E22FBD;  --magenta-ink: #A3107F;  --magenta-glow: rgba(226, 47, 189, .30); --magenta-soft: rgba(226, 47, 189, .10);
    --amber: #F08C1A;    --amber-ink: #8C4A00;    --amber-glow: rgba(240, 140, 26, .32);   --amber-soft: rgba(240, 140, 26, .14);
    --lime: #65A30D;     --lime-ink: #3F6212;     --lime-glow: rgba(101, 163, 13, .30);    --lime-soft: rgba(101, 163, 13, .14);
    --prism: linear-gradient(120deg, #3FDDF5 0%, #9B84FF 36%, #FF7BE2 68%, #FFCB66 100%);
    --prism-soft: linear-gradient(120deg, rgba(18,191,220,.16), rgba(108,77,240,.14), rgba(226,47,189,.12), rgba(242,181,51,.16));
    --focus: #4F32C8; --selection: rgba(108, 77, 240, .26);
    --shadow-1: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 20px rgba(60, 44, 140, .09);
    --shadow-2: 0 1px 0 rgba(255,255,255,.95) inset, 0 16px 44px rgba(60, 44, 140, .14);
    --shadow-3: 0 1px 0 #fff inset, 0 30px 80px rgba(50, 36, 120, .22);
    --shadow-glow: 0 0 0 1px rgba(108,77,240,.30), 0 10px 36px rgba(108,77,240,.20);
    --specular: rgba(255, 255, 255, .75);
    --aurora-1: rgba(18, 191, 220, .22); --aurora-2: rgba(140, 110, 255, .22);
    --aurora-3: rgba(255, 110, 220, .18); --aurora-4: rgba(255, 196, 80, .24);
    --star: rgba(108, 77, 240, .0); --grain-opacity: .04;
    --skeleton-a: rgba(34,24,92,.06); --skeleton-b: rgba(34,24,92,.13);
  }
}

/* A venture colour in one attribute: <x data-v="cyan"> exposes --v, --v-ink, --v-glow, --v-soft.
   Venture ids map too, so views can write data-v="perfumes". */
[data-v="cyan"], [data-v="elixier"]      { --v: var(--cyan);    --v-ink: var(--cyan-ink);    --v-glow: var(--cyan-glow);    --v-soft: var(--cyan-soft); }
[data-v="violet"], [data-v="agentic"]    { --v: var(--violet);  --v-ink: var(--violet-ink);  --v-glow: var(--violet-glow);  --v-soft: var(--violet-soft); }
[data-v="gold"], [data-v="perfumes"]     { --v: var(--gold);    --v-ink: var(--gold-ink);    --v-glow: var(--gold-glow);    --v-soft: var(--gold-soft); }
[data-v="coral"], [data-v="company"]     { --v: var(--coral);   --v-ink: var(--coral-ink);   --v-glow: var(--coral-glow);   --v-soft: var(--coral-soft); }
[data-v="emerald"], [data-v="personal"]  { --v: var(--emerald); --v-ink: var(--emerald-ink); --v-glow: var(--emerald-glow); --v-soft: var(--emerald-soft); }
[data-v="magenta"]                       { --v: var(--magenta); --v-ink: var(--magenta-ink); --v-glow: var(--magenta-glow); --v-soft: var(--magenta-soft); }
[data-v="amber"]                         { --v: var(--amber);   --v-ink: var(--amber-ink);   --v-glow: var(--amber-glow);   --v-soft: var(--amber-soft); }
[data-v="lime"], [data-v="lemon"]        { --v: var(--lime);    --v-ink: var(--lime-ink);    --v-glow: var(--lime-glow);    --v-soft: var(--lime-soft); }