/* ==========================================================================
   Redix Digital — Design Tokens
   Three-layer architecture (design-system/references/token-architecture.md):

     PRIMITIVE  raw values, no meaning        --c-navy-900, --sp-5
     SEMANTIC   purpose aliases              --surface, --text-hi
     COMPONENT  per-component overrides      --btn-bg, --card-pad

   Rule: components read COMPONENT or SEMANTIC tokens. Never a raw hex,
   never a PRIMITIVE directly outside this file.
   ========================================================================== */

/* The typeface, Assistant (SIL Open Font License, assets/fonts/README.txt), served by the site
   itself since 2026-10-20 rather than from Google Fonts: no visitor's address goes to a third
   party with every page. One variable file per script, 200 to 800, as Google cut them. */
/* hebrew */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/assistant-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/assistant-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/assistant-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   LAYER 1 — PRIMITIVES
   ========================================================================== */

:root {
  /* --- Brand source of truth (sampled from the logo artwork) ------------ */
  --c-brand-navy: #202c59;
  --c-brand-cyan: #00c4cc;
  --c-brand-white: #fffff9;

  /* --- Navy ramp -------------------------------------------------------- */
  --c-navy-950: #070b1a;
  --c-navy-900: #090e21;
  --c-navy-850: #0c1226;
  --c-navy-800: #131b3a;
  --c-navy-700: #1a2447;
  --c-navy-600: var(--c-brand-navy);

  /* --- Cyan ramp -------------------------------------------------------- */
  --c-cyan-700: #00898f;
  --c-cyan-600: #00a8af;
  --c-cyan-500: var(--c-brand-cyan);
  --c-cyan-400: #2fe0e6;
  --c-cyan-300: #7df0f4;

  /* --- Support hues (gradient partners only, never text) ---------------- */
  --c-indigo-500: #4f7cff;
  --c-violet-500: #8b5cf6;

  /* --- Neutral ramp ----------------------------------------------------- */
  --c-slate-050: #f2f6ff;
  --c-slate-200: #c2cde8;
  --c-slate-400: #8b99bc;

  /* --- Feedback --------------------------------------------------------- */
  --c-red-300: #ffb3b3;
  --c-red-400: #ff8a8a;
  --c-green-500: #25d366;
  --c-green-950: #062b13;

  /* --- Spacing, 4/8 rhythm ---------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* --- Radii ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Durations & easings ---------------------------------------------- */
  --t-micro: 90ms; /* Micro-interactions style: 50–100ms hover feedback */
  --t-fast: 180ms;
  --t-base: 260ms;
  --t-slow: 520ms;

  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* ≈ power2.out */
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ≈ back.out(1.4) */
}

/* ==========================================================================
   LAYER 2 — SEMANTIC
   ========================================================================== */

:root {
  /* --- Surfaces (deepest → lightest) ------------------------------------
     The canvas is far deeper than the brand navy: #202C59 is too light for a
     full-screen ground, so it is reserved as a raised brand plate. */
  --ink-900: var(--c-navy-950);
  --ink-850: var(--c-navy-900);
  --ink-800: var(--c-navy-850);
  --surface: var(--c-navy-800);
  --surface-2: var(--c-navy-700);
  --surface-hi: var(--c-navy-600);

  /* --- Accent ----------------------------------------------------------- */
  --accent: var(--c-cyan-500);
  --accent-hi: var(--c-cyan-400);
  --accent-soft: var(--c-cyan-300);
  --accent-deep: var(--c-cyan-600);

  /* Kept as aliases so existing rules keep resolving. */
  --cyan-500: var(--accent);
  --cyan-400: var(--accent-hi);
  --cyan-300: var(--accent-soft);
  --cyan-600: var(--accent-deep);

  /* --- Text (every pair verified ≥ 4.5:1, see MASTER.md §3) ------------- */
  --text-hi: var(--c-slate-050);
  --text-mid: var(--c-slate-200);
  --text-low: var(--c-slate-400);
  --text-on-accent: var(--ink-900);

  /* --- Feedback --------------------------------------------------------- */
  --danger: var(--c-red-400);
  --danger-text: var(--c-red-300);

  /* --- Lines & glass ---------------------------------------------------- */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(0, 196, 204, 0.42);
  --glass: rgba(19, 27, 58, 0.62);
  --scrim: rgba(7, 11, 26, 0.86);

  /* --- Gradients -------------------------------------------------------- */
  --grad-accent: linear-gradient(120deg, var(--accent-hi), var(--accent) 55%, var(--c-indigo-500));
  --grad-text: linear-gradient(100deg, var(--accent-soft), var(--accent) 45%, #6f9bff);
  --grad-surface: linear-gradient(160deg, var(--surface-2), var(--surface));

  /* --- Elevation — Dimensional Layering, 4 discrete levels -------------- */
  --elev-1: 0 2px 8px rgba(0, 0, 0, 0.4);
  --elev-2: 0 12px 32px rgba(0, 0, 0, 0.45);
  --elev-3: 0 28px 64px rgba(0, 0, 0, 0.55);
  --elev-4: 0 44px 96px rgba(0, 0, 0, 0.62);

  --glow: 0 0 40px rgba(0, 196, 204, 0.25);
  --glow-strong: 0 0 64px rgba(0, 196, 204, 0.4);

  /* Legacy aliases */
  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-3);
  --glow-accent: var(--glow);
  --glow-accent-strong: var(--glow-strong);

  /* --- Spacing aliases -------------------------------------------------- */
  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-5);
  --space-6: var(--sp-6);
  --space-7: var(--sp-7);
  --space-8: var(--sp-8);
  --space-9: var(--sp-9);
  --space-10: var(--sp-10);

  --section-y: clamp(64px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 48px);
  --container: 1240px; /* grows with the screen from 1440px up (below) */
  --measure: 68ch;

  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-pill: var(--r-pill);

  /* --- Typography ------------------------------------------------------- */
  /* One family across the site: Assistant. The three roles keep their names
     so headings, body copy and data labels can still be styled apart. */
  --font-display: "Assistant", "Arial Hebrew", system-ui, sans-serif;
  --font-body: "Assistant", "Arial Hebrew", system-ui, sans-serif;
  --font-mono: "Assistant", "Arial Hebrew", system-ui, sans-serif;

  /* Capped at 68px: the hero copy column is ~620px, and anything larger
     forces "נכס דיגיטלי" onto a second line. */
  --fs-display: clamp(2.35rem, 1.35rem + 3.4vw, 4.25rem);
  /* The statement moment runs much larger (Exaggerated Minimalism), capped at
     96px so its longest line still fits the 1240px container on two lines. */
  --fs-mega: clamp(2.6rem, 1.2rem + 6vw, 6rem);
  --fs-h1: clamp(2.1rem, 1.3rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --fs-section: clamp(2.25rem, 1.35rem + 3.7vw, 4.5rem);  /* section titles: 36 → 72px */
  --fs-section-side: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); /* titles in a side column: 32 → 56px */
  --fs-h3: clamp(1.3rem, 1.08rem + 1vw, 1.75rem);
  --fs-lead: clamp(1.075rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  /* The lighter half of a title (.title-soft) and other light display text */
  --fw-soft: 300;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --tracking-tight: -0.02em;
  --tracking-mega: -0.045em; /* Exaggerated Minimalism: -0.05em at display size */
  --tracking-wide: 0.14em;

  /* --- Motion aliases --------------------------------------------------- */
  --dur-micro: var(--t-micro);
  --dur-fast: var(--t-fast);
  --dur-base: var(--t-base);
  --dur-slow: var(--t-slow);
  --ease-out: var(--e-out);
  --ease-in-out: var(--e-in-out);
  --ease-back: var(--e-spring);

  /* --- Layering --------------------------------------------------------- */
  --z-base: 1;
  --z-grain: 5;
  --z-rail: 90;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-float: 400;
  --z-modal: 500;
  --z-preloader: 600;
  --z-cursor: 700;
}

/* ==========================================================================
   LAYER 3 — COMPONENT
   ========================================================================== */

:root {
  /* Button */
  --btn-bg: transparent;
  --btn-fg: var(--text-hi);
  --btn-border: var(--border-strong);
  --btn-radius: var(--r-pill);
  --btn-pad-x: var(--sp-6);
  --btn-pad-y: var(--sp-3);
  --btn-min-h: 44px; /* WCAG 2.2 target-size floor */

  /* Card */
  --card-bg: var(--grad-surface);
  --card-border: var(--border);
  --card-radius: var(--r-lg);
  --card-pad: var(--sp-6);
  --card-elev: var(--elev-2);
  --card-lift: -4px;

  /* Field */
  --field-bg: var(--ink-850);
  --field-border: var(--border-strong);
  --field-radius: var(--r-md);
  --field-min-h: 52px;
  --field-ring: rgba(0, 196, 204, 0.25);

  /* Header */
  --header-h: 92px;
  --header-bg: var(--scrim);

  /* Misc component sizing */
  --tap-min: 44px;
  --fab-size: 60px;
  --cursor-size: 7px; /* trail particle */
  --cursor-ring: 42px;
  --grain-opacity: 0.035;
}

/* Phones: body copy never below 16px and small labels never below 14px
   (ux: readable-font-size), and the light half of a title steps up from
   300 to 400. A 300 Hebrew stroke at phone size, light on a dark ground,
   breaks up; 400 keeps the contrast of weights against the 800 half. */
@media (max-width: 767px) {
  :root {
    --fs-sm: 1rem;
    --fs-xs: 0.875rem;
    --fw-soft: 400;
    --fab-size: 56px;
  }
}

/* Motion tokens collapse when motion is stopped (.motion-still, set by
   a11y.js). The OS "reduce motion" setting alone gives gentle motion instead,
   so it only collapses them for visitors without JS. */
:root.motion-still {
  --dur-micro: 1ms;
  --dur-fast: 1ms;
  --dur-base: 1ms;
  --dur-slow: 1ms;
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.js) {
    --dur-micro: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}