/* Hallmark · design tokens · theme: custom (anchored on user-provided iota.org
 * reference, later re-themed to the Code Experts / CodeXperts brand green)
 * genre: modern-minimal
 * Paper/ink below are OKLCH, measured by sampling the actual pixels of the
 * original reference screenshot and converting sRGB -> OKLCH (not eyeballed):
 *   paper  rgb(248,248,248) -> oklch(97.9% 0.002 250)
 *   ink    rgb(16,24,32)    -> oklch(20.5% 0.02 249)    [heading text]
 * Accent below was re-measured from the client's own CodeXperts logo file
 * (median of ~41k green pixels, not eyeballed):
 *   accent rgb(119,185,0)   -> oklch(71.4% 0.194 130.6)  [logo "X"/"PERTS"]
 * Accent-ink flips dark-on-light here (not the old near-white): this green's
 * L=71% is too light for white text — measured contrast white-on-accent is
 * only 2.4:1 (fails WCAG AA's 4.5:1), dark-ink-on-accent measures 7.3:1.
 */

:root {
  /* ---- Color: paper & surfaces (cool near-white, matches the reference) ---- */
  --color-paper:        oklch(97.9% 0.002 250);  /* page background */
  --color-paper-2:      oklch(99.3% 0.002 250);  /* card / tile surface, a touch lighter than paper */
  --color-paper-3:      oklch(95% 0.008 250);    /* proof band — subtle deepening, not a dark band */

  /* ---- Color: ink (cool near-black, measured from the reference's heading) ---- */
  --color-ink:          oklch(20.5% 0.02 249);   /* headings */
  --color-ink-2:        oklch(34% 0.018 249);    /* body copy */
  --color-ink-3:        oklch(50% 0.016 249);    /* muted / meta text */

  /* ---- Color: rule / border ---- */
  --color-rule:         oklch(90% 0.01 250);
  --color-rule-2:       oklch(84% 0.012 250);

  /* ---- Color: the one accent signal — CodeXperts brand green (see header) ---- */
  --color-accent:       oklch(71.4% 0.194 130.6); /* = rgb(119,185,0), from the logo file */
  --color-accent-hover: oklch(62.9% 0.171 130.5); /* darker green, ~rgb(100,156,0) */
  --color-accent-ink:   oklch(20.5% 0.02 249);    /* dark ink on filled accent (contrast fix, see header) */
  --color-accent-soft:  oklch(93.9% 0.051 123.1); /* pale green tint, replaces the old blue card tint */
  --color-accent-soft-ink: oklch(46.1% 0.125 133.2); /* text on accent-soft, 5.75:1 contrast */

  /* ---- Color: WhatsApp's own brand green (#25D366), used only for the sticky
     WhatsApp button and WhatsApp send action — a distinct external brand from
     Code Experts' own green above, kept recognizable rather than themed ---- */
  --color-whatsapp:       oklch(76.1% 0.201 149.7);
  --color-whatsapp-hover: oklch(64.3% 0.169 149.9);

  /* ---- Color: semantic (form states only) ---- */
  --color-success:      oklch(58% 0.14 155);
  --color-success-soft: oklch(94% 0.04 155);
  --color-danger:       oklch(52% 0.20 24);
  --color-danger-soft:  oklch(94% 0.04 24);

  /* ---- Color: focus ---- */
  --color-focus:        var(--color-accent);

  /* ---- Color: overlays & scrims (video/modal chrome) ---- */
  --color-glass:         oklch(99% 0.004 250 / 0.82);  /* nav backdrop-blur fill */
  --color-scrim:         oklch(20.5% 0.02 249 / 0.28); /* play-button hover scrim on media */
  --color-scrim-strong:  oklch(20.5% 0.02 249 / 0.6);  /* modal backdrop */
  --color-overlay:       oklch(100% 0 0 / 0.92);       /* translucent white circles (play icon, modal close) */
  --color-overlay-hover: oklch(100% 0 0 / 1);
  --color-badge-hover:   oklch(78% 0.09 254);
  --color-video-bg:      oklch(10% 0.015 249);         /* video letterbox — cool near-black, never pure #000 */
  --color-success-ink:   oklch(32% 0.1 155);
  --color-danger-ink:    oklch(38% 0.16 24);

  /* ---- Font ---- */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* ---- Type scale ---- */
  --text-xs:   0.8125rem;   /* 13px */
  --text-sm:   0.9375rem;   /* 15px */
  --text-base: 1.0625rem;   /* 17px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  1.875rem;    /* 30px */
  --text-3xl:  2.25rem;     /* 36px */
  --text-4xl:  2.75rem;     /* 44px */
  --text-display-s: clamp(2.25rem, 4vw + 1rem, 3.25rem);
  --text-display:   clamp(2.5rem, 4vw + 1.25rem, 3.75rem);

  /* ---- Space (4pt scale) ---- */
  --space-3xs: 0.25rem;  /* 4px */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs:  0.75rem;  /* 12px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  3rem;     /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */

  /* ---- Radius ---- */
  --radius-sm:   10px;   /* inputs, small controls, chips */
  --radius-md:   16px;   /* cards / tiles */
  --radius-pill: 999px;  /* buttons */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* ---- Shadow (used once, on the floating nav pill only) ---- */
  --shadow-nav: 0 1px 2px oklch(20.5% 0.02 249 / 0.04), 0 8px 24px oklch(20.5% 0.02 249 / 0.08);
  --shadow-modal: 0 24px 64px oklch(20.5% 0.02 249 / 0.28);
}

@media (prefers-color-scheme: dark) {
  /* This theme is light by design (near-white paper, cool-black ink) —
     intentionally does not ship an inverted dark mode. Force light rendering
     rather than let the UA guess at a broken partial-dark blend. */
  :root { color-scheme: light; }
}