/*
 * Formless Flow — Design System
 * Generated with standby.design from brand color #4A6D72
 * Restore/fine-tune: https://standby.design/system/?t=Formless+Flow&c=4A6D72#c=4A6D72,335A7F,1,CC3333,1,15,balanced,0,0,best,Formless%20Flow,0,0!Healing:000000:0:1:140:0!Warmth:000000:0:1:30:0&t=custom,1,1.25,1.188,satoshi,satoshi,system-mono
 *
 * Key decisions:
 * - OKLCH color space (perceptually uniform)
 * - Balanced mode: step 500 = perceptual midpoint
 * - Surface chroma 15% (subtle tint)
 * - 2 accent colors: Healing (green hue 140°) + Warmth (warm hue 30°)
 * - Type scale: custom ratio 1.25, fluid clamp() between 375px–1920px
 * - Satoshi font (headings + body)
 */

/* Formless Flow — Primitive Tokens */
:root {

  /* Brand */
  /* Light Surfaces */
  --color-brand-25: oklch(0.9560 0.0128 207.14);
  --color-brand-50: oklch(0.9320 0.0193 207.14);
  --color-brand-75: oklch(0.9080 0.0254 207.14);
  --color-brand-100: oklch(0.8840 0.0312 207.14);

  /* Core */
  --color-brand-200: oklch(0.7880 0.0509 207.14);
  --color-brand-300: oklch(0.6920 0.0649 207.14);
  --color-brand-400: oklch(0.5960 0.0733 207.14);
  --color-brand-500: oklch(0.5000 0.0761 207.14);
  --color-brand-600: oklch(0.4200 0.0694 207.14);
  --color-brand-700: oklch(0.3400 0.0569 207.14);
  --color-brand-800: oklch(0.2600 0.0450 207.14);

  /* Dark Surfaces (normal) */
  --color-brand-825: oklch(0.2400 0.0422 207.14);
  --color-brand-850: oklch(0.2200 0.0395 207.14);
  --color-brand-875: oklch(0.2000 0.0370 207.14);

  /* Dark Surfaces (high contrast) */
  --color-brand-900: oklch(0.1800 0.0348 207.14);
  --color-brand-925: oklch(0.1600 0.0331 207.14);
  --color-brand-950: oklch(0.1400 0.0321 207.14);
  --color-brand-975: oklch(0.1200 0.0322 207.14);

  /* Surface — 15% chroma */
  /* Light Surfaces */
  --color-surface-25: oklch(0.9560 0.0019 207.14);
  --color-surface-50: oklch(0.9320 0.0029 207.14);
  --color-surface-75: oklch(0.9080 0.0038 207.14);
  --color-surface-100: oklch(0.8840 0.0047 207.14);

  /* Core */
  --color-surface-200: oklch(0.7880 0.0076 207.14);
  --color-surface-300: oklch(0.6920 0.0097 207.14);
  --color-surface-400: oklch(0.5960 0.0110 207.14);
  --color-surface-500: oklch(0.5000 0.0114 207.14);
  --color-surface-600: oklch(0.4200 0.0102 207.14);
  --color-surface-700: oklch(0.3400 0.0073 207.14);
  --color-surface-800: oklch(0.2600 0.0045 207.14);

  /* Dark Surfaces (normal) */
  --color-surface-825: oklch(0.2400 0.0039 207.14);
  --color-surface-850: oklch(0.2200 0.0033 207.14);
  --color-surface-875: oklch(0.2000 0.0028 207.14);

  /* Dark Surfaces (high contrast) */
  --color-surface-900: oklch(0.1800 0.0022 207.14);
  --color-surface-925: oklch(0.1600 0.0018 207.14);
  --color-surface-950: oklch(0.1400 0.0014 207.14);
  --color-surface-975: oklch(0.1200 0.0010 207.14);

  /* Neutral */
  --color-neutral-0: oklch(1 0 0);
  --color-neutral-25: oklch(0.9560 0.0000 207.14);
  --color-neutral-50: oklch(0.9320 0.0000 207.14);
  --color-neutral-75: oklch(0.9080 0.0000 207.14);
  --color-neutral-100: oklch(0.8840 0.0000 207.14);
  --color-neutral-200: oklch(0.7880 0.0000 207.14);
  --color-neutral-300: oklch(0.6920 0.0000 207.14);
  --color-neutral-400: oklch(0.5960 0.0000 207.14);
  --color-neutral-500: oklch(0.5000 0.0000 207.14);
  --color-neutral-600: oklch(0.4200 0.0000 207.14);
  --color-neutral-700: oklch(0.3400 0.0000 207.14);
  --color-neutral-800: oklch(0.2600 0.0000 207.14);
  --color-neutral-825: oklch(0.2400 0.0000 207.14);
  --color-neutral-850: oklch(0.2200 0.0000 207.14);
  --color-neutral-875: oklch(0.2000 0.0000 207.14);
  --color-neutral-900: oklch(0.1800 0.0000 207.14);
  --color-neutral-925: oklch(0.1600 0.0000 207.14);
  --color-neutral-950: oklch(0.1400 0.0000 207.14);
  --color-neutral-975: oklch(0.1200 0.0000 207.14);
  --color-neutral-1000: oklch(0 0 0);

  /* Error */
  --color-error-25: oklch(0.9560 0.0208 25.22);
  --color-error-50: oklch(0.9320 0.0328 25.22);
  --color-error-75: oklch(0.9080 0.0452 25.22);
  --color-error-100: oklch(0.8840 0.0583 25.22);
  --color-error-200: oklch(0.7880 0.1168 25.22);
  --color-error-300: oklch(0.6920 0.1532 25.22);
  --color-error-400: oklch(0.5960 0.1731 25.22);
  --color-error-500: oklch(0.5000 0.1797 25.22);
  --color-error-600: oklch(0.4200 0.1637 25.22);
  --color-error-700: oklch(0.3400 0.1338 25.22);
  --color-error-800: oklch(0.2600 0.1050 25.22);
  --color-error-825: oklch(0.2400 0.0981 25.22);
  --color-error-850: oklch(0.2200 0.0914 25.22);
  --color-error-875: oklch(0.2000 0.0851 25.22);
  --color-error-900: oklch(0.1800 0.0792 25.22);
  --color-error-925: oklch(0.1600 0.0740 25.22);
  --color-error-950: oklch(0.1400 0.0699 25.22);
  --color-error-975: oklch(0.1200 0.0674 25.22);

  /* Healing Accent — green hue 140° */
  --color-healing-25: oklch(0.9560 0.0242 140.13);
  --color-healing-50: oklch(0.9320 0.0364 140.13);
  --color-healing-75: oklch(0.9080 0.0480 140.13);
  --color-healing-100: oklch(0.8840 0.0589 140.13);
  --color-healing-200: oklch(0.7880 0.0959 140.13);
  --color-healing-300: oklch(0.6920 0.1224 140.13);
  --color-healing-400: oklch(0.5960 0.1383 140.13);
  --color-healing-500: oklch(0.5000 0.1436 140.13);
  --color-healing-600: oklch(0.4200 0.1312 140.13);
  --color-healing-700: oklch(0.3400 0.1079 140.13);
  --color-healing-800: oklch(0.2600 0.0860 140.13);

  /* Warmth Accent — dusty rose hue 340° */
  --color-warmth-25: oklch(0.9560 0.0210 340);
  --color-warmth-50: oklch(0.9320 0.0331 340);
  --color-warmth-75: oklch(0.9080 0.0456 340);
  --color-warmth-100: oklch(0.8840 0.0587 340);
  --color-warmth-200: oklch(0.7880 0.1175 340);
  --color-warmth-300: oklch(0.6920 0.1501 340);
  --color-warmth-400: oklch(0.5960 0.1696 340);
  --color-warmth-500: oklch(0.5000 0.1761 340);
  --color-warmth-600: oklch(0.4200 0.1610 340);
  --color-warmth-700: oklch(0.3400 0.1327 340);
  --color-warmth-800: oklch(0.2600 0.1065 340);
}

/* Formless Flow — Semantic Tokens (shadcn/ui compatible) */
:root {
  /* Base */
  --background: var(--color-surface-50);
  --foreground: var(--color-surface-975);
  /* Card */
  --card: var(--color-surface-25);
  --card-foreground: var(--color-surface-975);
  /* Popover */
  --popover: var(--color-surface-25);
  --popover-foreground: var(--color-surface-975);
  /* Primary */
  --primary: var(--color-brand-600);
  --primary-foreground: var(--color-brand-50);
  --primary-subtle: var(--color-brand-100);
  --primary-subtle-foreground: var(--color-brand-950);
  /* Secondary — softened brand */
  --secondary: var(--color-brand-200);
  --secondary-foreground: var(--color-brand-900);
  /* Muted */
  --muted: var(--color-surface-75);
  --muted-foreground: var(--color-surface-700);
  /* Accent */
  --accent: var(--color-brand-100);
  --accent-foreground: var(--color-brand-950);
  /* Destructive */
  --destructive: var(--color-error-600);
  --destructive-foreground: var(--color-error-50);
  /* Border / Input / Ring */
  --border: var(--color-surface-300);
  --border-muted: var(--color-surface-200);
  --input: var(--color-surface-300);
  --ring: var(--color-surface-400);
}

/* Type Scale — Custom Ratio (1.25) */
:root {
  /* Font Families */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace;

  /* Type Scale with fluid clamp() */
  --text-display: clamp(2.8112rem, 1.0392vw + 2.5676rem, 3.8147rem);
  --text-h1: clamp(2.3664rem, 0.7098vw + 2.2rem, 3.0518rem);
  --text-h2: clamp(1.9919rem, 0.4655vw + 1.8828rem, 2.4414rem);
  --text-h3: clamp(1.6767rem, 0.2862vw + 1.6096rem, 1.9531rem);
  --text-h4: clamp(1.4113rem, 0.1566vw + 1.3746rem, 1.5625rem);
  --text-h5: clamp(1.188rem, 0.0642vw + 1.173rem, 1.25rem);
  --text-h6: 1rem;
  --text-body-l: clamp(1.4113rem, 0.1566vw + 1.3746rem, 1.5625rem);
  --text-body-m: clamp(1.188rem, 0.0642vw + 1.173rem, 1.25rem);
  --text-body-s: 1rem;
  --text-caption: clamp(0.8rem, 0.0433vw + 0.7899rem, 0.8418rem);

  /* Line Heights */
  --leading-display: 1.05;
  --leading-h1: 1.1;
  --leading-h2: 1.15;
  --leading-h3: 1.2;
  --leading-h4: 1.25;
  --leading-h5: 1.3;
  --leading-h6: 1.4;
  --leading-body-l: 1.5;
  --leading-body-m: 1.5;
  --leading-body-s: 1.5;
  --leading-caption: 1.4;

  /* Letter Spacing */
  --tracking-display: -0.04em;
  --tracking-h1: -0.03em;
  --tracking-h2: -0.02em;
  --tracking-h3: -0.01em;
  --tracking-h4: 0em;
  --tracking-h5: 0em;
  --tracking-h6: 0em;
  --tracking-body-l: 0em;
  --tracking-body-m: 0em;
  --tracking-body-s: 0.01em;
  --tracking-caption: 0.01em;
}

/* Space — Harmonic multiples */
:root {
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Containers */
  --container-prose: 680px;
  --container-narrow: 960px;
  --container-default: 1200px;
  --container-wide: 1440px;
  --prose-max: 65ch;
}

/* Shape Tokens */
:root {
  /* Shadows */
  --shadow-xs: 0 0.247rem 0.371rem oklch(0.05 0.01 197.07 / 0.052), 0 0.618rem 1.236rem oklch(0.05 0.01 197.07 / 0.078);
  --shadow-sm: 0 0.314rem 0.472rem oklch(0.05 0.01 197.07 / 0.066), 0 0.786rem 1.572rem oklch(0.05 0.01 197.07 / 0.099);
  --shadow-md: 0 0.400rem 0.600rem oklch(0.05 0.01 197.07 / 0.084), 0 1.000rem 2.000rem oklch(0.05 0.01 197.07 / 0.126);
  --shadow-lg: 0 0.509rem 0.763rem oklch(0.05 0.01 197.07 / 0.107), 0 1.272rem 2.544rem oklch(0.05 0.01 197.07 / 0.160);
  --shadow-xl: 0 0.647rem 0.971rem oklch(0.05 0.01 197.07 / 0.136), 0 1.618rem 3.236rem oklch(0.05 0.01 197.07 / 0.204);

  /* Border Radius */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Border */
  --border-width: 1px;

  /* Focus Ring */
  --ring-width: 2px;
  --ring-offset: 2px;
}