/*
  Design tokens for Family CFO.
  Values are a best-effort extraction from docs/references/product-ui-styleguide.jpg
  plus the explicit palette description in CLAUDE.md's "Visual Design System" section.
  Not pixel-sampled from the source image — treat as a starting point, documented
  in docs/design-system.md, easy to correct once real brand assets exist.
*/

:root {
  /* Color: surfaces */
  --color-canvas: #f6f1e7;
  --color-surface: #ffffff;
  --color-surface-alt: #f2ede3;
  --color-sidebar: #fbf8f1;
  --color-border: #e4dfd3;
  --color-focus-ring: #1f6f6b;

  /* Decorative canvas grid: intentionally very faint */
  --color-grid-line: rgba(31, 67, 64, 0.035);
  --grid-size: 26px;
  --grid-edge-fade: 72px;

  /* Color: text */
  --color-text-primary: #1a1a18;
  --color-text-secondary: #5b564c;
  --color-text-tertiary: #8c877a;
  --color-text-on-primary: #ffffff;

  /* Color: primary action (deep teal) */
  --color-primary: #1f6f6b;
  --color-primary-hover: #195957;
  --color-primary-active: #124542;
  --color-primary-subtle-bg: #e4efee;

  /* Color: neutral gray scale */
  --color-gray-900: #201f1c;
  --color-gray-700: #45423b;
  --color-gray-500: #79766c;
  --color-gray-300: #c9c4b7;
  --color-gray-100: #ede9df;
  --color-gray-50: #f8f5ee;

  /* Color: semantic (foreground + tint background; always paired with an icon, never color-only) */
  --color-success-fg: #2f7d5a;
  --color-success-bg: #e4f2ea;
  --color-info-fg: #2a6fa8;
  --color-info-bg: #e5f0f8;
  --color-warning-fg: #8a5f0c;
  --color-warning-bg: #fbf0dc;
  --color-danger-fg: #b23a34;
  --color-danger-bg: #fbe7e5;

  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  --text-h1-size: 2.5rem;
  --text-h1-weight: 700;
  --text-h1-line-height: 1.15;

  --text-h2-size: 1.75rem;
  --text-h2-weight: 700;
  --text-h2-line-height: 1.2;

  --text-h3-size: 1.25rem;
  --text-h3-weight: 600;
  --text-h3-line-height: 1.3;

  --text-body-lg-size: 1.125rem;
  --text-body-lg-line-height: 1.5;

  --text-body-md-size: 1rem;
  --text-body-md-line-height: 1.5;

  --text-body-sm-size: 0.875rem;
  --text-body-sm-line-height: 1.45;

  --text-caption-size: 0.75rem;
  --text-caption-weight: 500;
  --text-caption-line-height: 1.4;
  --text-caption-tracking: 0.02em;

  /* Spacing: 8px base, 4px increments */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Radius: restrained, most controls 4-8px, cards 8-12px */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Elevation: soft, neutral shadows only */
  --shadow-1: 0 1px 2px rgba(26, 26, 24, 0.06), 0 1px 1px rgba(26, 26, 24, 0.04);
  --shadow-2: 0 4px 8px -2px rgba(26, 26, 24, 0.1), 0 2px 4px -2px rgba(26, 26, 24, 0.06);
  --shadow-3: 0 8px 16px -4px rgba(26, 26, 24, 0.12), 0 4px 8px -4px rgba(26, 26, 24, 0.08);
  --shadow-4: 0 16px 32px -8px rgba(26, 26, 24, 0.16), 0 8px 16px -8px rgba(26, 26, 24, 0.1);

  /* Layout */
  --content-max-width: 1280px;
  --sidebar-width: 240px;
  --header-height: 64px;

  /* Breakpoints (referenced in @media rules directly — CSS vars aren't usable in media queries) */
  --breakpoint-tablet: 640px;
  --breakpoint-desktop: 1024px;
}