/*
  DiffCue marketing site — design tokens.
  Source of truth: /Users/khaledea/data/elm/code-diff/DESIGN.md
  Values are the app's own real palette (from the shipping SwiftUI app's UI),
  not invented for the marketing site. Each color is declared twice: a hex
  fallback first, then the OKLCH value — browsers without oklch() support
  simply ignore the second declaration and keep the hex.
*/

:root {
  /* ---- Text ---- */
  --ink:        #1E1B17;
  --ink:        oklch(22% 0.015 55);   /* primary text — ~16:1 on --paper */
  --ink-soft:   #56524C;
  --ink-soft:   oklch(38% 0.012 55);   /* secondary text — ~8.9:1 on --paper */
  --muted:      #8D887F;
  --muted:      oklch(58% 0.012 55);   /* meta/tertiary text only — ~4.6:1, never body copy */
  --muted-2:    #A29D94;
  --muted-2:    oklch(68% 0.010 55);   /* faint labels — decorative only, not text content */

  /* ---- Surfaces ---- */
  --paper:      #FEFDFC;
  --paper:      oklch(99% 0.004 80);   /* page background */
  --surface:    #F7F6F3;
  --surface:    oklch(97.5% 0.005 75); /* recessed panels */
  --surface-2:  #FBFAF8;
  --surface-2:  oklch(98.5% 0.004 80); /* header bars */
  --border:     #E6E3DD;
  --border:     oklch(91% 0.008 70);   /* hairlines */
  --border-2:   #DAD6CE;
  --border-2:   oklch(88% 0.010 65);   /* control borders */

  /* ---- Brand ---- */
  --brand:       #4F46C4;
  --brand:       oklch(46% 0.19 285);  /* primary purple — white on brand ~6.2:1 */
  --brand-hover: #413AA8;
  --brand-hover: oklch(40% 0.19 285);
  --brand-tint:  #EDEAFB;
  --brand-tint:  oklch(94% 0.03 285);  /* badge / tint background */
  --brand-ring:  oklch(46% 0.19 285 / 0.25);

  /* ---- Diff colors (exact app tokens) ---- */
  --add-bg: #E9F6EE;
  --add-bg: oklch(95% 0.04 150);
  --add-fg: #155F33;
  --add-fg: oklch(38% 0.11 150);
  --del-bg: #FDEDED;
  --del-bg: oklch(95% 0.03 20);
  --del-fg: #9B2020;
  --del-fg: oklch(40% 0.15 25);
  --diff-blank: #FAF9F7;
  --diff-blank: oklch(97% 0.004 75);   /* filler row where one side of a hunk has no line */

  /* ---- Near-black "code-mockup chrome" surface ----
     Not itself an app token in DESIGN.md (which specifies the app's light-chrome
     palette above); this is the marketing site's own dark showcase backdrop that
     DESIGN.md's art-direction note calls for around the product mockup, extended
     from the --ink family so it stays in the same low-chroma warm-neutral hue. */
  --chrome:        #16140F;
  --chrome:        oklch(15% 0.012 55);
  --chrome-2:      #201D17;
  --chrome-2:      oklch(20% 0.012 55);
  --chrome-border: #38342B;
  --chrome-border: oklch(30% 0.012 55);
  --on-chrome:        #FBFAF8;
  --on-chrome:        oklch(98% 0.004 80);
  --on-chrome-muted:  #A9A399;
  --on-chrome-muted:  oklch(66% 0.012 55);

  /* ---- Type ---- */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   0.75rem;      /* 12px */
  --text-sm:   0.84375rem;   /* 13.5px */
  --text-base: 1rem;         /* 16px */
  --text-lg:   1.1875rem;    /* 19px */
  --text-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl:  clamp(2rem, 1.6rem + 2vw, 2.75rem);
  --text-hero: clamp(2.75rem, 2rem + 4vw, 4.75rem);

  /* ---- Layout ---- */
  --content-max: 1180px;
  --prose-max: 68ch;
  --gutter: clamp(24px, 6vw, 96px);
  --section-space: clamp(96px, 12vw, 160px);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hero: 640ms;
  --dur-reveal: 560ms;

  /* ---- Shadow ---- */
  --shadow-window: 0 40px 90px rgba(30, 26, 20, 0.36), 0 0 0 1px rgba(0, 0, 0, 0.14);
  --shadow-card: 0 1px 2px rgba(30, 26, 20, 0.08);
}