/* ============================================================================
   Bella Ledger, TOKENS (colour schemes, type, spacing, radii, elevation).
   The only place raw values live. Edit here; pages never hardcode a value.
   ============================================================================ */

:root {
  color-scheme: light;

  /* Colors */
  --primary: #1f9e8f;          /* Ledger Teal, the single action colour */
  --primary-dark: #14776b;     /* Deep Teal, links + teal text on light */
  --primary-light: #7fd8cb;    /* Mint, text/accents on navy only */
  --on-primary: #ffffff;
  --secondary: #0e2436;        /* Ledger Navy */
  --secondary-container: #16344c;
  --on-secondary: #ffffff;
  --background: #f6f8fa;        /* cool paper */
  --surface: #ffffff;
  --surface-muted: #e7edf2;
  --on-surface: #1b2733;
  --on-surface-variant: #5b6b7a; /* Slate */
  --outline: #e3e9ef;
  --outline-hover: #c6d2dc;
  --error: #b6433a;            /* Brick */
  --error-container: #fbeceb;
  --on-error: #ffffff;
  --warning: #c47b1a;          /* Amber */
  --warning-container: #fbf3e6;
  --warning-ink: #8a560f;      /* AA-safe amber text on warning-container */
  --success-container: #e8f5f3;
  --info: #2c6fb0;             /* Ledger Blue, accountant tasks */
  --info-container: #eaf2fa;
  --client: #6b45b8;           /* Violet, the client */
  --client-container: #f1ecfb;
  --source: #3d4fb3;           /* Indigo, triggers/inputs */
  --decision-surface: #fffcf6;
  --human-surface: #f8fbfe;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radii */
  --r-xs: 5px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-card: 14px; --r-full: 999px;

  /* Spacing */
  --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 20px; --s-xxl: 32px;
  --gutter: 16px; --card-padding: 20px; --sidebar: 260px;

  /* Sidebar & on-navy ink */
  --sidebar-ink: #bcd2cf;        /* nav text on navy */
  --sidebar-ink-dim: #86a7a3;    /* footer text on navy */
  --on-secondary-soft: #cfe2e0;  /* soft white ink on navy */
  --alert: #ff8f7a;              /* coral, alert metric number */
  --skeleton-hi: #eef2f6;        /* skeleton shimmer highlight */
  --surface-tint: #fbfdfe;       /* faint surface tint, open flag head */
  --hover: #eaf2fa;              /* very light blue, hover state for rows and nav */
  --on-navy-line: rgba(255,255,255,.12);  /* hairline divider on the navy rail */
  --cal0: #e8f5f3; --cal1: #bfe9e0; --cal2: #7fd8cb; --cal3: #1f9e8f; --cal4: #14776b; /* month heatmap, teal only */
  /* Flag / analysis severities */
  --sev-accepted: var(--primary);  /* teal — accepted / correct */
  --sev-warning: #f7c614;          /* warning */
  --sev-critical: #f15968;         /* critical */
  --sev-client: #f68015;           /* client review */
  --sev-client-container: #fdecd9; /* soft orange tint for client-review icon bg */
  --on-primary-muted: rgba(255,255,255,.82); /* secondary text on teal surfaces */

  /* Elevation */
  --shadow: 0 1px 2px rgba(16,40,64,.06), 0 6px 20px rgba(16,40,64,.06);
  --shadow-float: 0 2px 4px rgba(16,40,64,.04), 0 12px 32px rgba(16,40,64,.08);
  --shadow-teal: 0 4px 12px rgba(31,158,143,.3);
  --scrim: rgba(14,36,54,.55);

  /* Floating shell (Frame 19 structure) */
  --r-float: 20px;          /* generous card radius */
  --card-pad-lg: 22px;      /* floating card padding */
  --rail-w: 76px;           /* floating icon rail width */
  --shell-pad: 20px;        /* breathing room around the whole shell */
  --on-accent-dim: rgba(255,255,255,.82); /* muted ink on an accent card */
  --accent-veil: rgba(255,255,255,.16);   /* tint on an accent card */
}