:root {
  /* ---- backgrounds (warm light, never pure black) ---- */
  --bg-canvas: #FAF8F5;
  --bg-surface: #FFFFFF;
  --bg-sand: #F1EBE2;
  --bg-clay: #EAE0D3;
  --bg-warm-800: #2C2620;
  --bg-scrim: rgba(28,25,23,0.04);

  /* ---- text (warm near-black ladder) ---- */
  --text-ink: #1C1917;
  --text-muted: #5C554E;
  --text-subtle: #6E665E;
  --text-on-accent: #FFFFFF;
  --text-on-bright: #1C1917;

  /* ---- primary accent: terracotta ---- */
  --terracotta-500: #C2502E;
  --terracotta-700: #B4442A;
  --terracotta-text: #B4442A;
  --terracotta-tint: #FBEAE1;

  /* ---- secondary accent: amber ---- */
  --amber-500: #E8A13A;
  --amber-text: #8A5610;
  --amber-100: #FAE9CE;
  --amber-50: #FDF6EA;

  /* ---- semantics ---- */
  --success: #3F6B4A;
  --success-tint: #E6F0E7;
  --warning: #8A5610;
  --warning-tint: #FAE9CE;
  --error: #A23B2E;
  --error-tint: #F7E3DE;
  --info: #3A5A78;
  --info-tint: #E4ECF3;

  /* ---- structure ---- */
  --border-hairline: #EAE3D9;
  --border-strong: #D8CEC0;

  /* ---- type families ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-numeric: "Inter", system-ui, sans-serif;
  --font-mono: "Sohne Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- type scale ---- */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 23px;
  --text-2xl: 28px;
  --text-3xl: 33px;
  --text-4xl: 47px;
  --text-5xl: 67px;
  --text-6xl: 80px;

  /* ---- weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 460;

  /* ---- leading / tracking ---- */
  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --leading-ui: 1.4;
  --tracking-display: -0.02em;
  --tracking-body: 0em;
  --tracking-label: 0.01em;

  /* ---- spacing (4pt grid) ---- */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-inset-card: var(--space-6);
  --space-gap-stack: var(--space-4);
  --space-gap-inline: var(--space-3);
  --space-section-y: var(--space-32);
  --space-gutter: var(--space-6);
  --space-field-y: var(--space-3);

  /* ---- radius ---- */
  --radius-xs: 6px;
  --radius-input: 10px;
  --radius-md: 14px;
  --radius-card: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;
  --radius-button: var(--radius-pill);
  --radius-image: var(--radius-xl);

  /* ---- elevation (soft, warm-tinted, no glow) ---- */
  --shadow-xs: 0 1px 2px rgba(28,25,23,0.04);
  --shadow-sm: 0 2px 6px rgba(28,25,23,0.05);
  --shadow-card: 0 1px 2px rgba(28,25,23,0.04), 0 8px 24px rgba(28,25,23,0.06);
  --shadow-lg: 0 12px 32px rgba(28,25,23,0.09);
  --shadow-xl: 0 24px 64px rgba(28,25,23,0.10);
  --shadow-focus: 0 0 0 3px rgba(180,68,42,0.35);

  /* ---- motion ---- */
  --motion-instant: 80ms;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 360ms;
  --motion-slower: 560ms;
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --signal-ripple: 600ms;
}

/* ---- agent app: denser functional extension ---- */
[data-surface="app"] {
  --text-4xl: 34px;
  --text-5xl: 40px;
  --text-base: 14px;
  --leading-body: 1.5;
  --space-section-y: var(--space-12);
  --space-inset-card: var(--space-4);
  --space-gutter: var(--space-4);
  --space-field-y: var(--space-2);
  --radius-card: 14px;
  --shadow-card: var(--shadow-sm);
}

/* ---- agent app: optional warm-dark theme ---- */
[data-theme="dark"] {
  --bg-canvas: #1A1714;
  --bg-surface: #231F1B;
  --bg-sand: #2E2924;
  --bg-clay: #2E2924;
  --text-ink: #EDE6DC;
  --text-muted: #B0A79C;
  --text-subtle: #B0A79C;
  --text-on-accent: #1A1714;
  --text-on-bright: #1A1714;
  --terracotta-500: #E0794F;
  --terracotta-700: #E0794F;
  --terracotta-text: #E0794F;
  --terracotta-tint: #3A2A22;
  --amber-500: #E8A13A;
  --amber-text: #E8A13A;
  --success: #8FC7A0;
  --error: #E8938A;
  --warning: #E8A13A;
  --border-hairline: #332D27;
  --border-strong: #413A32;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.40);
  --shadow-focus: 0 0 0 3px rgba(224,121,79,0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-spring: var(--ease-out-soft);
    --motion-slow: var(--motion-fast);
    --motion-slower: var(--motion-fast);
  }
}