/* ============================================================
   מנורה ERN — App semantic layer
   Built ON TOP of the Figma Variables library (lib/fig-tokens.css).
   - Two switchable brand themes: [data-theme="menora"] | [data-theme="pango"]
   - Leading-color picker:        [data-lead="..."]
   - Font overridden to SimplerPro (brand font) over the token scale.
   ============================================================ */

@import './lib/fig-tokens.css';

/* ---- Brand font: SimplerPro ---- */
@font-face{font-family:'SimplerPro';src:url('assets/SimplerPro-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'SimplerPro';src:url('assets/SimplerPro-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'SimplerPro';src:url('assets/SimplerPro-Black.ttf') format('truetype');font-weight:900;font-display:swap;}

/* ============================================================
   Sizing scale — consumed from the Figma float tokens (×1px)
   ============================================================ */
:root{
  --app-font:'SimplerPro','Helvetica Neue',Arial,sans-serif;

  /* radius (mirrors corner-radius-* tokens) */
  --app-r-xs: calc(var(--corner-radius-8) * 1px);
  --app-r-sm: calc(var(--corner-radius-12-2) * 1px);
  --app-r-md: calc(var(--corner-radius-16) * 1px);
  --app-r-lg: calc(var(--corner-radius-24) * 1px);
  --app-r-xl: calc(var(--corner-radius-32) * 1px);
  --app-r-2xl: calc(var(--corner-radius-48) * 1px);
  --app-r-pill: 999px;

  /* spacing (mirrors spacing-* tokens) */
  --app-s-2: calc(var(--spacing-2) * 1px);
  --app-s-4: calc(var(--spacing-4) * 1px);
  --app-s-6: calc(var(--spacing-6) * 1px);
  --app-s-8: calc(var(--spacing-8) * 1px);
  --app-s-12: calc(var(--spacing-12) * 1px);
  --app-s-16: calc(var(--spacing-16) * 1px);
  --app-s-24: calc(var(--spacing-24) * 1px);
  --app-s-32: calc(var(--spacing-32) * 1px);
  --app-s-40: calc(var(--spacing-40) * 1px);
  --app-s-48: calc(var(--spacing-48) * 1px);
  --app-s-64: calc(var(--spacing-64) * 1px);
  --app-s-80: calc(var(--spacing-80) * 1px);
  --app-s-96: calc(var(--spacing-96) * 1px);
  --app-s-120: calc(var(--spacing-120) * 1px);

  /* type (mirrors font-size-* tokens, desktop "-2" scale) */
  --app-fs-num: calc(var(--font-size-numbers-2) * 1px);   /* 80 */
  --app-fs-h1: calc(var(--font-size-heading-1-2) * 1px);  /* 56 */
  --app-fs-h2: calc(var(--font-size-heading-2-2) * 1px);  /* 48 */
  --app-fs-h3: calc(var(--font-size-heading-3-2) * 1px);  /* 32 */
  --app-fs-b1: calc(var(--font-size-body-1-2) * 1px);     /* 20 */
  --app-fs-b2: calc(var(--font-size-body-2-2) * 1px);     /* 18 */
  --app-fs-b3: calc(var(--font-size-body-3-2) * 1px);     /* 16 */

  /* default theme = menora (so first paint is correct before [data-theme] resolves) */
  --app-bg:#FCFAF4;
  --app-surface:#FFFFFF;
  --app-surface-2:#F4EEE2;
  --app-ink:#1B1233;
  --app-ink-2:#463F5C;
  --app-ink-soft:#857E96;
  --app-line:rgba(27,18,51,.10);
  --app-line-2:rgba(27,18,51,.06);
  --app-brand:#251baa;
  --app-brand-deep:#320F5B;
  --app-green:#4fc570;
  --app-lead:#251baa;
  --app-lead-strong:#251baa;
  --app-lead-soft:#E4E2F6;
  --app-on-lead:#ffffff;
}

/* ============================================================
   THEME 1 — Menora ERN (brand-book mapped)
   ============================================================ */
[data-theme="menora"]{
  --app-bg:#FCFAF4;
  --app-surface:#FFFFFF;
  --app-surface-2:#F4EEE2;
  --app-ink:#1B1233;
  --app-ink-2:#463F5C;
  --app-ink-soft:#857E96;
  --app-line:rgba(27,18,51,.10);
  --app-line-2:rgba(27,18,51,.06);
  --app-brand:#251baa;       /* brand primary indigo */
  --app-brand-deep:#320F5B;  /* logo purple */
  --app-green:#4fc570;       /* logo green */
}

/* ============================================================
   THEME 2 — Pango (original Figma tokens)
   ============================================================ */
[data-theme="pango"]{
  --app-bg: var(--primitives-neutral-100);            /* #f9fafc */
  --app-surface: var(--primitives-neutral-0);         /* #fff */
  --app-surface-2: var(--basic-color-grey-light-3);   /* #f9f9fb */
  --app-ink: var(--basic-black);                      /* #191919 */
  --app-ink-2: var(--neutral-colors-grey-dark-1);     /* #636363 */
  --app-ink-soft: var(--primitives-neutral-500);      /* #6d6d6d */
  --app-line: rgba(25,25,25,.10);
  --app-line-2: rgba(25,25,25,.05);
  --app-brand: var(--primitives-primary-main-500);    /* #f86f3e orange */
  --app-brand-deep: var(--primary-colors-blue-dark);  /* #183b86 */
  --app-green: var(--transit-world-main-green);       /* #48c5b5 teal */
  --app-lead: var(--secondary-colors-pango-orange);   /* #ff6550 */
  --app-lead-strong:#E04A38;
  --app-lead-soft:#FFE7E2;
  --app-on-lead:#ffffff;
}

/* ============================================================
   LEADING COLOR — single picker (brand swatches + free directions)
   Placed AFTER themes so it wins for --app-lead.
   ============================================================ */
[data-lead="indigo"]{--app-lead:#251baa;--app-lead-strong:#251baa;--app-lead-soft:#E4E2F6;--app-on-lead:#fff;}
[data-lead="purple"]{--app-lead:#9872b2;--app-lead-strong:#6E4E9E;--app-lead-soft:#ECE3F3;--app-on-lead:#fff;}
[data-lead="pink"]  {--app-lead:#e795c0;--app-lead-strong:#C24E92;--app-lead-soft:#FBE8F3;--app-on-lead:#3A1330;}
[data-lead="yellow"]{--app-lead:#f9dc5c;--app-lead-strong:#9A7B00;--app-lead-soft:#FCF3CC;--app-on-lead:#2A1B0A;}
[data-lead="sky"]   {--app-lead:#b5e3ee;--app-lead-strong:#2E93B3;--app-lead-soft:#E4F4F8;--app-on-lead:#06333F;}
[data-lead="teal"]  {--app-lead:#19b8a6;--app-lead-strong:#0E8174;--app-lead-soft:#D9F3EF;--app-on-lead:#fff;}
[data-lead="coral"] {--app-lead:#ff6550;--app-lead-strong:#E04A38;--app-lead-soft:#FFE7E2;--app-on-lead:#fff;}
[data-lead="green"] {--app-lead:#4fc570;--app-lead-strong:#2FA85B;--app-lead-soft:#E3F6EA;--app-on-lead:#06210F;}

/* ============================================================
   THEME 3 — Black (single-color, flat). Used by the black edition.
   ============================================================ */
[data-theme="black"]{
  --app-bg:#0A0A0B;
  --app-surface:#141416;
  --app-surface-2:#1C1C1F;
  --app-ink:#F6F4EF;
  --app-ink-2:#B7B4AE;
  --app-ink-soft:#86837D;
  --app-line:rgba(246,244,239,.14);
  --app-line-2:rgba(246,244,239,.07);
  --app-brand:#F6F4EF;
  --app-brand-deep:#000000;
  --app-green:#4fc570;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}