/* ───────────────────────────────────────────────────────────────
   THEMATICA DESIGN SYSTEM · colors_and_type.css
   Cream/ink palette inspired by Anthropic. Geist Sans primary.
─────────────────────────────────────────────────────────────── */

/* Font faces — using Geist (matches codebase via next/font).
   Fallback Google Fonts served from CDN so static HTML works. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Core palette ── */
  --cream-50:  #faf8f0;   /* primary app background */
  --cream-100: #f4f2ea;   /* nav / surface-2 */
  --cream-200: #ece9e0;   /* hover, pill-bg */
  --cream-300: #e8e6df;   /* default border */
  --cream-400: #dedbd3;   /* strong border, focus ring */
  --cream-500: #c5c2bb;   /* divider-strong */

  --ink-900: #1a1a1a;   /* near-black for dense strong text / primary button */
  --ink-800: #222222;   /* accent ink */
  --ink-700: #2a2a2a;   /* body "ink" - primary text color */
  --ink-600: #4a4a4a;   /* secondary text */
  --ink-500: #666666;   /* foreground – subdued body */
  --ink-400: #888888;   /* muted */
  --ink-300: #999999;   /* placeholder */
  --ink-200: #aaaaaa;
  --ink-100: #cccccc;

  --surface:       #ffffff;   /* cards / modals */
  --surface-alt:   #faf8f0;   /* inside modal header, pattern */
  --surface-muted: #f8f7f3;   /* hover row */

  /* ── Semantic ── */
  --fg-1: var(--ink-700);    /* primary body */
  --fg-2: var(--ink-500);    /* secondary body */
  --fg-3: var(--ink-400);    /* tertiary / icon */
  --fg-inverse: #ffffff;

  --bg-1: var(--cream-50);   /* app bg */
  --bg-2: var(--cream-100);  /* subtle panel */
  --bg-surface: var(--surface);

  --border-1: var(--cream-300);
  --border-2: var(--cream-400);

  /* ── Accent / utility ── */
  --accent-emerald: #059669;
  --accent-emerald-bg: #ecfdf5;
  --accent-amber-bg: #fef3cd;
  --accent-amber-fg: #d97706;
  --accent-amber-border: #fde9b5;
  --accent-red: #dc2626;
  --accent-red-hover: #b91c1c;
  --accent-red-bg: #fef2f2;
  --accent-red-border: #fecaca;
  --accent-green: #16a34a;
  --accent-green-bg: #f0fdf4;
  --accent-green-border: #bbf7d0;
  --accent-blue: #1a6dcf;
  --accent-blue-hover: #0f4a8a;
  --accent-blue-bg: #eff6ff;

  /* ── Typography ── */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-serif: 'Georgia', 'Times New Roman', serif; /* research-report prose */

  /* Font sizes (rem scale, 1rem = 16px) */
  --fs-10: 0.625rem;  /* 10px — micro labels  */
  --fs-11: 0.6875rem; /* 11px — caption       */
  --fs-12: 0.75rem;   /* 12px — ui caption    */
  --fs-13: 0.8125rem; /* 13px — ui small      */
  --fs-14: 0.875rem;  /* 14px — ui body       */
  --fs-15: 0.9375rem; /* 15px — reading       */
  --fs-16: 1rem;      /* 16px — input, body   */
  --fs-17: 1.0625rem; /* 17px — emphasis body */
  --fs-18: 1.125rem;  /* 18px — h4            */
  --fs-20: 1.25rem;   /* 20px — h3            */
  --fs-22: 1.375rem;  /* 22px — h2            */
  --fs-24: 1.5rem;    /* 24px — h1 (modest)   */
  --fs-32: 2rem;      /* 32px — display sm    */
  --fs-44: 2.75rem;   /* 44px — display md    */
  --fs-60: 3.75rem;   /* 60px — display lg    */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose:   1.75;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.02em;
  --ls-wider:  0.04em;
  --ls-widest: 0.08em;

  /* ── Radii ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);
  --shadow-2xl: 0 25px 60px rgba(0,0,0,0.25);
  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.04);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--cream-400);

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

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-slow: 200ms;
  --dur-slower: 300ms;
}