/* ================================================================
   Sitepro Design Tokens — colors_and_type.css
   Cinematic B&W system. No brand color. Light is the only accent.
   ================================================================ */

/* One-request Google Fonts — Rubik (Hebrew+Latin display/body), Inter Tight (Latin display fallback) */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Inter+Tight:wght@500;600;700;800;900&display=swap');

:root {
  /* ---------- Color: Ink / Paper ---------- */
  --sp-ink:           #0A0A0B;     /* base canvas — "ink" */
  --sp-ink-2:         #101013;     /* surface above ink (cards, panels) */
  --sp-ink-3:         #16161A;     /* one more notch up — rarely used */
  --sp-paper:         #F5F5F2;     /* text + light — never pure white */
  --sp-paper-dim:     rgba(245,245,242,.64); /* secondary text */
  --sp-paper-mute:    rgba(245,245,242,.40); /* tertiary text / placeholder */

  /* ---------- Color: Lines ---------- */
  --sp-line:          rgba(245,245,242,.14); /* hairline border, default */
  --sp-line-strong:   rgba(245,245,242,.32); /* active border / hover */
  --sp-line-bright:   rgba(245,245,242,.62); /* focus ring / divider */

  /* ---------- Color: Light (the only "accent") ---------- */
  --sp-accent:        #F5F5F2;
  --sp-glow:          rgba(255,255,255,.55); /* halo / glow */
  --sp-glow-soft:     rgba(255,255,255,.18);

  /* ---------- Color: Coral (warm secondary accent, pairs with blue) ---------- */
  --sp-coral:         #FF7A59;
  --sp-coral-warm:    #FF8A6D;                /* slightly lighter — for amber-replacement spots */
  --sp-coral-glow:    rgba(255,122,89,.55);
  --sp-coral-soft:    rgba(255,122,89,.18);

  /* ---------- Shadow ---------- */
  --sp-shadow-cinema: 0 30px 80px rgba(0,0,0,.45);
  --sp-shadow-card:   0 12px 32px rgba(0,0,0,.30);
  --sp-shadow-press:  0 4px 12px rgba(0,0,0,.20);

  /* ---------- Type families ---------- */
  --ff-display:       'Rubik', 'Inter Tight', system-ui, sans-serif;
  --ff-body:          'Rubik', system-ui, sans-serif;
  --ff-hebrew:        'Rubik', system-ui, sans-serif;
  --ff-mono:          ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (clamp) ---------- */
  --fs-display:   clamp(3.5rem, 9vw, 9.5rem);
  --fs-h1:        clamp(2.5rem, 6vw, 5.5rem);
  --fs-h2:        clamp(2rem, 4.4vw, 4.25rem);
  --fs-h3:        clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-lead:      clamp(1.125rem, 1.4vw, 1.4rem);
  --fs-body:      1rem;
  --fs-small:     .875rem;
  --fs-meta:      .78rem;          /* uppercase eyebrows */

  /* ---------- Tracking ---------- */
  --ls-display:   -0.03em;
  --ls-headline:  -0.02em;
  --ls-body:      0;
  --ls-meta:      .18em;           /* the eyebrow tracking */

  /* ---------- Line height ---------- */
  --lh-display:   .92;
  --lh-headline:  1.04;
  --lh-body:      1.55;
  --lh-meta:      1.2;

  /* ---------- Spacing (8px baseline) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  144px;
  --sp-10: 200px;

  /* ---------- Radii (sharp by default) ---------- */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;     /* small chips */
  --r-3:  8px;
  --r-4:  12px;    /* AI-stack cards — upper limit */
  --r-pill: 999px; /* pill chips only */

  /* ---------- Easings ---------- */
  --ease-cinema:  cubic-bezier(.2, .8, .2, 1);
  --ease-snap:    cubic-bezier(.6, 0, .2, 1);
  --ease-soft:    cubic-bezier(.25, 1, .5, 1);

  /* ---------- Durations ---------- */
  --dur-xs: 180ms;
  --dur-sm: 360ms;
  --dur-md: 720ms;
  --dur-lg: 1200ms;

  /* ---------- Layout ---------- */
  --grid-cols:    12;
  --grid-gap:     clamp(16px, 1.4vw, 28px);
  --section-pad:  clamp(48px, 7vh, 110px);
  --maxw:         1440px;
}

/* ================================================================
   Semantic styles — use as classes on real elements
   ================================================================ */

html, body {
  background: var(--sp-ink);
  color: var(--sp-paper);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="rtl"] body { font-family: var(--ff-hebrew); }

/* Display headline — the manifesto. Heavy + wide for Hebrew impact. */
.sp-display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.005em;
  font-weight: 900;
  color: var(--sp-paper);
}

/* H1 — page hero, slightly less than display */
.sp-h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  font-weight: 700;
}

.sp-h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-headline);
  letter-spacing: -0.005em;
  font-weight: 800;
}

.sp-h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.sp-lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--sp-paper-dim);
  font-weight: 400;
  max-width: 56ch;
}

.sp-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.sp-small { font-size: var(--fs-small); line-height: 1.5; color: var(--sp-paper-dim); }

/* Eyebrow / meta tag */
.sp-meta {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sp-paper-dim);
}

/* Mono (rare — used for technical labels in AI stack) */
.sp-mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--sp-paper-dim);
}

/* The accent word — "פרסום" treatment */
.sp-accent-word {
  position: relative;
  color: var(--sp-paper);
  text-shadow: 0 0 36px var(--sp-glow);
}

/* Hairline divider */
.sp-divider {
  height: 1px;
  width: 100%;
  background: var(--sp-line);
  border: 0;
}

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