/* ============================================================
   Day Accounting — Design tokens
   Brand anchor: Sage (#285C63) — the muted teal from the logo.
   Warm paper neutrals + bronze accent keep the system human.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Sage (primary brand teal) --- */
  --sage-50:  #F1F6F6;
  --sage-100: #DEEAEA;
  --sage-200: #BFD4D5;
  --sage-300: #93B4B6;
  --sage-400: #5E8E91;
  --sage-500: #307078;
  --sage-600: #285C63;
  --sage-700: #234B50;
  --sage-800: #1F3D41;
  --sage-900: #182F32;
  --sage-950: #101F21;

  /* --- Bronze (warm accent — used sparingly) --- */
  --brass-100: #F4E9D4;
  --brass-300: #DEC089;
  --brass-500: #BE9445;
  --brass-600: #A37B33;
  --brass-700: #836225;

  /* --- Warm neutrals (paper -> ink) --- */
  --paper: #FBFAF7;
  --bone: #F4F1EA;
  --linen: #ECE7DC;
  --neutral-0: #FFFFFF;
  --neutral-100: #F1EEE8;
  --neutral-200: #E2DDD3;
  --neutral-300: #CFC9BC;
  --neutral-400: #ABA496;
  --neutral-500: #837C6F;
  --neutral-600: #5F594F;
  --neutral-700: #433F38;
  --neutral-800: #2A2823;
  --ink: #1A1D1F;

  /* --- Semantic status --- */
  --green-100: #DCEEDF; --green-500: #2E8B57; --green-700: #1F6440;
  --amber-100: #F6E8CC; --amber-500: #C68A28; --amber-700: #8F6113;
  --red-100: #F6DCD8; --red-500: #C4493B; --red-700: #8E3027;

  /* --- Semantic aliases --- */
  --brand: var(--sage-600);
  --brand-strong: var(--sage-700);
  --brand-deep: var(--sage-900);
  --brand-soft: var(--sage-100);
  --brand-tint: var(--sage-50);
  --accent: var(--brass-500);

  --bg-page: var(--paper);
  --bg-subtle: var(--bone);
  --bg-well: var(--linen);
  --surface-card: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-inverse: var(--sage-900);

  --text-strong: var(--ink);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-faint: var(--neutral-400);
  --text-on-brand: #FFFFFF;
  --text-on-accent: var(--sage-950);
  --text-link: var(--sage-600);

  --border-hairline: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand: var(--sage-600);
  --keyline: var(--sage-600);

  --focus-ring: var(--sage-500);

  --status-success-bg: var(--green-100); --status-success-fg: var(--green-700);
  --status-warning-bg: var(--amber-100); --status-warning-fg: var(--amber-700);
  --status-danger-bg: var(--red-100); --status-danger-fg: var(--red-700);
  --status-info-bg: var(--sage-100); --status-info-fg: var(--sage-700);

  /* --- Typography --- */
  --font-display: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --font-text: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --text-6xl: 5.25rem;

  --leading-tight: 1.08;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tightest: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.22em;

  /* --- Spacing (4px base) --- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;
  --space-16: 10rem;

  /* --- Radii --- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --stroke-hairline: 1px;
  --stroke-keyline: 1.5px;
  --stroke-bold: 2px;

  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --gutter: clamp(1rem, 4vw, 4rem);

  /* --- Elevation / motion --- */
  --shadow-xs: 0 1px 2px rgba(40, 37, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(40, 37, 32, 0.08), 0 1px 2px rgba(40, 37, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(40, 37, 32, 0.08), 0 2px 4px rgba(40, 37, 32, 0.05);
  --shadow-lg: 0 12px 28px rgba(40, 37, 32, 0.10), 0 4px 8px rgba(40, 37, 32, 0.05);
  --shadow-xl: 0 24px 56px rgba(40, 37, 32, 0.14), 0 8px 16px rgba(40, 37, 32, 0.06);

  --ring-focus: 0 0 0 3px rgba(48, 112, 120, 0.35);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
}