/* Digi-Market design tokens — ported from the Claude Design system.
   Keeps every var(--c-*) in the ported markup working unchanged. */

/* ---- tokens/colors.css ---- */
/* Digi-Market — Color tokens
   Derived from the existing brand: deep navy + orange CTA + soft sky background.
   Light base, with dark sections for contrast/rhythm. */
:root {
  /* --- Brand: Navy (dark sections, footer) --- */
  --c-navy-900: #0B1F45;
  --c-navy-800: #12295C;
  --c-navy-700: #1B3A7A;

  /* --- Brand: Blue (typographic emphasis, highlights) --- */
  --c-blue-600: #2E5FD1;
  --c-blue-400: #5B8DEF;

  /* --- Brand: Orange (CTA only) --- */
  --c-orange-500: #F26522;
  --c-orange-600: #D9531A; /* hover + orange text on white (AA-safe) */

  /* --- Neutrals --- */
  --c-bg:      #FFFFFF;
  --c-bg-soft: #EEF3FB; /* soft sky section background */
  --c-bg-card: #FFFFFF;
  --c-line:    #DCE5F2;
  --c-text:    #0F1B33;
  --c-muted:   #5A6B85;
  --c-on-dark: #E8EEF9; /* body text on navy */

  /* --- Gradients --- */
  --g-dark: linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-navy-700) 100%);
  --g-cta:  linear-gradient(135deg, var(--c-orange-500) 0%, #FF8A4C 100%);

  /* --- Semantic aliases --- */
  --surface-page:      var(--c-bg);
  --surface-soft:      var(--c-bg-soft);
  --surface-card:      var(--c-bg-card);
  --surface-dark:      var(--c-navy-900);
  --text-body:         var(--c-text);
  --text-muted:        var(--c-muted);
  --text-on-dark:      var(--c-on-dark);
  --text-emphasis:     var(--c-blue-600);
  --border-default:    var(--c-line);
  --action:            var(--c-orange-500);
  --action-hover:      var(--c-orange-600);
  --action-text:       var(--c-orange-600);
}

/* ---- tokens/typography.css ---- */
/* Digi-Market — Typography tokens
   Heebo only. Fluid scale via clamp(). Hebrew needs generous line-height. */
:root {
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: var(--font);
  --font-display: var(--font);

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Fluid type scale */
  --h1:   clamp(2rem, 4.8vw, 3.6rem);      /* @kind font */
  --h2:   clamp(1.7rem, 3.4vw, 2.6rem);    /* @kind font */
  --h3:   clamp(1.15rem, 1.6vw, 1.4rem);   /* @kind font */
  --body: clamp(1rem, 1.05vw, 1.075rem);   /* @kind font */
  --small: 0.875rem;   /* @kind font */
  --kicker: 0.8125rem; /* @kind font */

  /* Line heights */
  --lh:       1.75; /* @kind font */
  --lh-tight: 1.12; /* @kind font */
  --lh-snug:  1.35; /* @kind font */

  /* Letter spacing */
  --ls-kicker: 0.12em; /* @kind font */
}

/* ---- tokens/spacing.css ---- */
/* Digi-Market — Spacing, layout & radii tokens */
:root {
  /* Layout */
  --max: 1240px;                          /* max content width */
  --sp:  clamp(3.5rem, 7vw, 6rem);        /* @kind spacing */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);  /* @kind spacing */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii */
  --r:    14px;
  --r-lg: 22px;
  --r-sm: 8px;
  --r-pill: 999px;
}

/* ---- tokens/effects.css ---- */
/* Digi-Market — Shadows, glow & motion tokens */
:root {
  /* Shadows */
  --sh-card:  0 4px 24px rgba(11, 31, 69, 0.08);
  --sh-hover: 0 12px 40px rgba(11, 31, 69, 0.16);
  --glow-o:   0 8px 24px rgba(242, 101, 34, 0.32); /* orange CTA glow */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur:  0.55s; /* @kind other */
  --dur-fast: 0.25s; /* @kind other */
}

/* ---- tokens/base.css ---- */
/* Digi-Market — base element defaults (RTL-first, minimal reset).
   Kept small: sets direction, body type, link colors, heading rhythm. */
:root {
  color-scheme: light;
}

html {
  direction: rtl;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--lh);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  color: var(--text-body);
  text-wrap: balance;
}
h3 { line-height: var(--lh-snug); font-weight: var(--fw-bold); }

p { margin: 0; text-wrap: pretty; }

/* Blue typographic emphasis — the recurring brand device inside headings. */
.hl { color: var(--text-emphasis); }
.hl--chip {
  color: #fff;
  background: var(--c-blue-600);
  padding-inline: 0.25em;
  border-radius: 6px;
  box-decoration-break: clone;
}

/* Links */
a { color: var(--c-blue-600); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--c-navy-700); }

/* Kicker — small label above an H2 */
.kicker {
  display: inline-block;
  font-size: var(--kicker);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  color: var(--text-muted);
  text-transform: uppercase;
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* The merged page CSS carried per-page body backgrounds (including the
   preloader's #070d22), which leaked across every page once combined.
   The page background is declared here once instead. */
body { background: var(--c-bg); color: var(--c-text); }