/* Hallmark · macrostructure: editorial-saas · tone: confident, warm-tech
 * theme: "Krida-inspired" concept: warm cream + warm near-black + electric lime
 * paper: #faf9f5 · ink: #141413 · accent: #d4fd8e lime · marker: #d8fca6
 * fonts: Newsreader (Signifier sub) + Hanken Grotesk (Beausite sub) + JetBrains Mono
 */

:root {
  /* ── Color ── */
  --color-paper:           #faf9f5;   /* cream-light, main background */
  --color-cream:           #f2efea;   /* subtle block background */
  --color-surface:         #ffffff;
  --color-surface-hover:   #f2efea;

  --color-ink:             #141413;   /* warm near-black */
  --color-ink-soft:        #2a2926;

  --color-border:          rgba(20, 20, 19, 0.12);
  --color-border-strong:   rgba(20, 20, 19, 0.28);

  --color-text-primary:    #141413;
  --color-text-secondary:  #57544e;
  --color-text-tertiary:   #7e7e7e;
  --color-text-muted:      #a6a4a0;

  --color-accent:          #141413;   /* dark fills */
  --color-lime:            #d4fd8e;   /* signature accent */
  --color-lime-deep:       #c2f06f;   /* hover / pressed lime */
  --color-marker:          #d8fca6;   /* highlighter underline */

  --color-error:           oklch(57.7% 0.245 27.325);
  --color-success:         oklch(46% 0.14 155);

  /* on-dark variants */
  --color-on-dark:         #faf9f5;
  --color-on-dark-muted:   #a6a4a0;

  /* ── Typography ── */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Text scale ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  46px;

  /* ── Space scale (4pt) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Radii (Krida runs big & soft) ── */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-full: 9999px;

  /* ── Elevation ── */
  --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-md: 0 12px 30px -12px rgba(20, 20, 19, 0.18);
  --shadow-lg: 0 25px 50px -12px rgba(20, 20, 19, 0.25);

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}