/* ==========================================================================
   tokens.css — the ONLY place literal values live.
   Light QuickBooks-style theme: white surfaces, QuickBooks green for buttons,
   neutral links/icons (per house rule: accent lives on buttons only).
   ========================================================================== */
:root {
  /* --- color --- */
  --color-bg:            #ffffff;   /* content background */
  --color-elevated:      #ffffff;   /* sidebar, panels */
  --color-header:        #2d3b4d;   /* top header — FreedomDev navy */
  --color-header-hover:  #3b4a5e;   /* header control hover — lighter navy */
  --color-header-fg:     #eef1f4;   /* header text/icons on navy */
  --color-header-fg-faint: #9fb0c0; /* header faint (caret) */
  --color-surface:       #ffffff;   /* cards */
  --color-surface-2:     #eef0f3;   /* inputs, hover, active, table header */
  --color-rail:          #f7f8fa;   /* left icon rail */
  --color-text:          #393a3d;   /* primary text (QBO ink) */
  --color-text-soft:     #6b6c72;   /* secondary text */
  --color-text-faint:    #8d9096;   /* metadata */
  --color-accent:        #2ca01c;   /* QuickBooks green — buttons only */
  --color-accent-deep:   #108000;   /* button hover */
  --color-accent-tint:   rgba(44, 160, 28, 0.12);
  --color-line:          #dcdfe3;   /* borders */
  --color-line-soft:     #eaecef;
  --color-row-hover:     #eef5fc;   /* light blue — list row hover */
  --color-row-selected:  #dcebfb;   /* light blue — selected row */
  --color-focus:         #2ca01c;   /* focus ring */
  --color-on-accent:     #ffffff;
  --color-danger:        #d52b1e;
  --color-danger-tint:   rgba(213, 43, 30, 0.10);
  --color-scrim:         rgba(0, 0, 0, 0.35);   /* modal overlay backdrop */
  --color-link:          #393a3d;   /* links: neutral, underlined */
  --color-link-line:     #b7bbc1;

  /* status (functional) — light */
  --color-status-active-bg:  #e3f1e1;
  --color-status-active-ink: #2a7d1c;
  --color-status-hold-bg:    #fbf1d6;
  --color-status-hold-ink:   #8a6d1b;
  --color-status-neutral-bg: #edeef1;
  --color-status-neutral-ink:#6b6c72;

  /* --- type --- */
  --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Attio-style compact scale (≈1 step smaller than QBO): 11 / 12 / 13 / 14 / 16 / 18 / 22 px */
  --fs-100: 0.6875rem;
  --fs-200: 0.75rem;
  --fs-300: 0.8125rem;
  --fs-400: 0.875rem;
  --fs-500: 1rem;
  --fs-600: 1.125rem;
  --fs-700: 1.375rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  --ls-wide: 0.08em;
  --ls-wider: 0.14em;

  /* --- space --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* --- lines / radius / shadow --- */
  --bw-1: 1px;
  --bw-accent: 2px;
  --underline-offset: 2px;
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.10);
  --z-modal: 1000;

  /* --- layout --- */
  --container: 64rem;
  --header-row1-h: 3.5rem;
  --header-row2-h: 3.25rem;
  --header-h: var(--header-row1-h);   /* single-row header */
  --rail-w: 6rem;
  --sidebar-w: 11.5rem;

  /* --- motion --- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* ==========================================================================
   Dark theme — overrides only the color tokens. Everything else (type,
   space, radius, layout) is shared. Accent green still lives on buttons only;
   row hover/selected use dark blues to mirror the light theme's light blues.
   ========================================================================== */
:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:            #1b1c1f;
  --color-elevated:      #232529;
  --color-header:        #232529;
  --color-header-hover:  #2e3136;
  --color-header-fg:     #e7e8ea;
  --color-header-fg-faint: #7d8087;
  --color-surface:       #232529;
  --color-surface-2:     #2e3136;   /* inputs, hover, table header */
  --color-rail:          #16171a;
  --color-text:          #e7e8ea;
  --color-text-soft:     #a8abb1;
  --color-text-faint:    #7d8087;
  --color-accent:        #2ca01c;   /* QuickBooks green — buttons only */
  --color-accent-deep:   #38b528;   /* button hover (lighter for dark) */
  --color-accent-tint:   rgba(44, 160, 28, 0.22);
  --color-line:          #34373c;
  --color-line-soft:     #2a2d31;
  --color-row-hover:     #22303d;   /* dark blue — list row hover */
  --color-row-selected:  #294056;   /* dark blue — selected row */
  --color-focus:         #38b528;
  --color-on-accent:     #ffffff;
  --color-danger:        #ef5350;
  --color-danger-tint:   rgba(239, 83, 80, 0.16);
  --color-scrim:         rgba(0, 0, 0, 0.6);
  --color-link:          #e7e8ea;
  --color-link-line:     #54585f;

  --color-status-active-bg:  #16331b;
  --color-status-active-ink: #7fd48a;
  --color-status-hold-bg:    #332f18;
  --color-status-hold-ink:   #e2c878;
  --color-status-neutral-bg: #2b2e33;
  --color-status-neutral-ink:#a8abb1;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.55);
}