/* LOOKATI v4 — the landing page's branding as Ed designed it in Claude Design, 2026-10-13 (BRIEF.md §4b).
   Mined from design/LOOKATI Homepage v3.dc.html. For the landing page this file wins over lookati-tokens.css.
   2026-10-13 (DESIGN tab, the port): hero size corrected to the canvas (the 47.5–81.5px value is the Arabic
   phrase's), button radii are the canvas's 7px / 10px (there is no 18px pill), footer + hero ground added.
   site/assets/tokens.css is a byte copy of this file; scripts/check_site.py fails if they differ. */
:root {
  --lk4-page:        #FFFFFF;
  --lk4-ink:         #111111;
  --lk4-body:        #555555;
  --lk4-muted:       #777777;   /* decoration only (the logo's "AI"); text that carries meaning uses --lk4-body */
  --lk4-faint:       #B5B5B5;   /* on --lk4-footer only */
  --lk4-line:        #E6E6E6;
  --lk4-panel:       #F4F4F4;
  --lk4-border:      #D4D4D4;
  --lk4-footer:      #1A1A1A;
  --lk4-hero-ground: #EEEDF1;
  --lk4-coral:       #FF6332;   /* text only at 24px+ (two words, Ed's accepted exception), marks, the rail line, the wordmark */
  --lk4-coral-dots:  rgba(255, 99, 50, .28);   /* the footer's 1px dot grid */

  --lk4-display:     'Jost', 'Alexandria', sans-serif;
  --lk4-text:        'Inter', 'Cairo', system-ui, sans-serif;
  --lk4-arabic:      'Alexandria', 'Cairo', sans-serif;
  --lk4-accent:      'Fraunces', serif;   /* italic 600, one word */

  --lk4-h1:          clamp(24px, 2.21vw, 44px);
  --lk4-h2:          clamp(22px, 2.21vw, 30.5px);
  --lk4-statement:   clamp(22px, 2.38vw, 34px);
  --lk4-arabic-display: clamp(47.5px, 5.95vw, 81.5px);
  --lk4-body-size:   15.5px;
  --lk4-small:       13.5px;
  --lk4-label:       11.5px;
  --lk4-track-caps:  .25em;
  --lk4-track-head:  .06em;

  --lk4-radius-btn:    7px;
  --lk4-radius-bar:    12px;   /* the floating nav + the step rail */
  --lk4-radius-btn-lg: 10px;
  --lk4-radius-card:   8px;
  --lk4-radius-panel:  16px;
  --lk4-radius-block:  18px;

  --lk4-width:       1316px;   /* 1188px of content + two 64px gutters: the cards and every section share it (Ed 2026-10-13) */
  --lk4-width-text:  760px;
  --lk4-gutter:      clamp(22px, 5vw, 64px);
  --lk4-section:     clamp(104px, 16vh, 184px);
  --lk4-ease:        cubic-bezier(.32, .72, 0, 1);
  --lk4-shadow-float: 0 10px 30px -18px rgba(0, 0, 0, .35);
  --lk4-shadow-panel: 0 40px 90px -30px rgba(0, 0, 0, .35);   /* the Home + Tutorials panels */
}