/* fin-tokens.css — Design tokens (--fin-*) for FRAZIER Finance OS.
   Ported from the ops app's fz-tokens.css (sections 1-4 + 6: the
   theme-independent / light / dark / first-paint / global-base sections —
   the genuinely portable part). Section 5 there (legacy --xcs-*/--fsw-*/
   --bh-* aliasing) does not apply: this app has no legacy CSS layers to
   alias onto, every component here reads --fin-* directly.
   Light is the base theme; dark lives under [data-theme="dark"]
   (app.jsx sets it on <html> before first paint). */

/* ═══ 1. THEME-INDEPENDENT ═══════════════════════════════════════════ */
:root {
  --fin-r-xs:   8px;
  --fin-r-sm:   12px;
  --fin-r-md:   16px;
  --fin-r-lg:   20px;
  --fin-r-xl:   24px;
  --fin-r-pill: 999px;

  --fin-s-1: 4px;
  --fin-s-2: 8px;
  --fin-s-3: 12px;
  --fin-s-4: 16px;
  --fin-s-5: 20px;
  --fin-s-6: 24px;
  --fin-s-7: 32px;
  --fin-s-8: 40px;

  --fin-font-display: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --fin-font-body:    Inter, system-ui, sans-serif;
  --fin-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fin-fs-title:   30px;
  --fin-fs-num-xl:  44px;
  --fin-fs-num:     32px;
  --fin-fs-num-sm:  24px;
  --fin-fs-section: 20px;
  --fin-fs-name:    18px;
  --fin-fs-card:    17px;
  --fin-fs-body:    14px;
  --fin-fs-meta:    13px;
  --fin-fs-micro:   12px;

  --fin-lh-head:    1.3;

  --fin-fw-regular: 400;
  --fin-fw-medium:  500;
  --fin-fw-semi:    600;
  --fin-fw-bold:    700;

  --fin-t-fast: 150ms;
  --fin-t-med:  220ms;
  --fin-ease:   cubic-bezier(.2, .7, .2, 1);

  --fin-page-pad:    28px;
  --fin-gap:         16px;
  --fin-card-pad:    20px;
  --fin-content-max: 1200px;
  --fin-drawer-w:    480px;
  --fin-ctl-h:       40px;
}
@media (max-width: 768px) {
  :root {
    --fin-fs-title: 26px;
    --fin-page-pad: 16px;
    --fin-gap:      12px;
    --fin-card-pad: 16px;
    --fin-ctl-h:    44px;
  }
}

/* ═══ 2. LIGHT ════════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  --fin-bg:             #F4F2ED;
  --fin-sidebar:        #FAF9F6;
  --fin-surface-1:      #FFFFFF;
  --fin-surface-2:      #F5F4F0;
  --fin-surface-3:      #EBE9E3;
  --fin-surface-hover:  #F2F1EC;
  --fin-surface-sunken: #F9F8F5;
  --fin-scrim:          rgba(24, 22, 16, .38);

  --fin-border:         #E6E3DC;
  --fin-border-strong:  #D2CEC5;
  --fin-focus:          #3A8F18;

  --fin-text-1:         #111513;
  --fin-text-2:         #4A524D;
  --fin-text-3:         #626A65;
  --fin-text-on-accent: #0A1405;

  --fin-accent:         #A3FF4D;
  --fin-accent-hover:   #97F23F;
  --fin-accent-ink:     #2A7010;
  --fin-accent-soft:    rgba(163, 255, 77, .28);
  --fin-accent-line:    #3F9C1B;

  --fin-ok:      #1E9A5A;  --fin-ok-soft:      rgba(30, 154, 90, .12);   --fin-ok-ink:      #13693B;
  --fin-warn:    #C27C0C;  --fin-warn-soft:    rgba(194, 124, 12, .14);  --fin-warn-ink:    #8A5400;
  --fin-crit:    #D9433D;  --fin-crit-soft:    rgba(217, 67, 61, .11);   --fin-crit-ink:    #B02A24;
  --fin-info:    #2F6FD3;  --fin-info-soft:    rgba(47, 111, 211, .11);  --fin-info-ink:    #1C55AD;
  --fin-violet:  #7B52D9;  --fin-violet-soft:  rgba(123, 82, 217, .11);  --fin-violet-ink:  #5B35B5;
  --fin-neutral: #7D8681;  --fin-neutral-soft: rgba(125, 134, 129, .13); --fin-neutral-ink: #4E5752;

  --fin-shadow-soft: 0 1px 2px rgba(40, 32, 16, .04), 0 6px 20px -10px rgba(40, 32, 16, .10);
  --fin-shadow-pop:  0 4px 12px rgba(40, 32, 16, .06), 0 24px 56px -18px rgba(40, 32, 16, .22);
}

/* ═══ 3. DARK (primary theme) ════════════════════════════════════════ */
[data-theme="dark"] {
  --fin-bg:             #0E1110;
  --fin-sidebar:        #111413;
  --fin-surface-1:      #151817;
  --fin-surface-2:      #1A1E1C;
  --fin-surface-3:      #232826;
  --fin-surface-hover:  #1E2220;
  --fin-surface-sunken: #111413;
  --fin-scrim:          rgba(4, 6, 5, .66);

  --fin-border:         rgba(255, 255, 255, .06);
  --fin-border-strong:  rgba(255, 255, 255, .11);
  --fin-focus:          #A3FF4D;

  --fin-text-1:         #EFF1F0;
  --fin-text-2:         #A9AFAC;
  --fin-text-3:         #8C928F;
  --fin-text-on-accent: #0A1405;

  --fin-accent:         #A3FF4D;
  --fin-accent-hover:   #B6FF73;
  --fin-accent-ink:     #A3FF4D;
  --fin-accent-soft:    rgba(163, 255, 77, .12);
  --fin-accent-line:    rgba(163, 255, 77, .55);

  --fin-ok:      #45C486;  --fin-ok-soft:      rgba(69, 196, 134, .14);  --fin-ok-ink:      #7BDCAB;
  --fin-warn:    #E8A93A;  --fin-warn-soft:    rgba(232, 169, 58, .14);  --fin-warn-ink:    #F2C46E;
  --fin-crit:    #F0716B;  --fin-crit-soft:    rgba(240, 113, 107, .14); --fin-crit-ink:    #FF9D97;
  --fin-info:    #5E9EEA;  --fin-info-soft:    rgba(94, 158, 234, .15);  --fin-info-ink:    #9CC4F7;
  --fin-violet:  #9E85F0;  --fin-violet-soft:  rgba(158, 133, 240, .16); --fin-violet-ink:  #C3B2FA;
  --fin-neutral: #8A938F;  --fin-neutral-soft: rgba(138, 147, 143, .14); --fin-neutral-ink: #B9C1BD;

  --fin-shadow-soft: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 30px -14px rgba(0, 0, 0, .55);
  --fin-shadow-pop:  0 4px 14px rgba(0, 0, 0, .32), 0 28px 64px -18px rgba(0, 0, 0, .72);
}

/* ═══ 4. DARK — FIRST PAINT (OS dark, before app.jsx sets data-theme) ═ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fin-bg: #0E1110; --fin-sidebar: #111413; --fin-surface-1: #151817;
    --fin-surface-2: #1A1E1C; --fin-surface-3: #232826; --fin-surface-hover: #1E2220;
    --fin-surface-sunken: #111413; --fin-scrim: rgba(4, 6, 5, .66);
    --fin-border: rgba(255, 255, 255, .06); --fin-border-strong: rgba(255, 255, 255, .11);
    --fin-focus: #A3FF4D;
    --fin-text-1: #EFF1F0; --fin-text-2: #A9AFAC; --fin-text-3: #8C928F; --fin-text-on-accent: #0A1405;
    --fin-accent: #A3FF4D; --fin-accent-hover: #B6FF73; --fin-accent-ink: #A3FF4D;
    --fin-accent-soft: rgba(163, 255, 77, .12); --fin-accent-line: rgba(163, 255, 77, .55);
    --fin-ok: #45C486; --fin-ok-soft: rgba(69, 196, 134, .14); --fin-ok-ink: #7BDCAB;
    --fin-warn: #E8A93A; --fin-warn-soft: rgba(232, 169, 58, .14); --fin-warn-ink: #F2C46E;
    --fin-crit: #F0716B; --fin-crit-soft: rgba(240, 113, 107, .14); --fin-crit-ink: #FF9D97;
    --fin-info: #5E9EEA; --fin-info-soft: rgba(94, 158, 234, .15); --fin-info-ink: #9CC4F7;
    --fin-violet: #9E85F0; --fin-violet-soft: rgba(158, 133, 240, .16); --fin-violet-ink: #C3B2FA;
    --fin-neutral: #8A938F; --fin-neutral-soft: rgba(138, 147, 143, .14); --fin-neutral-ink: #B9C1BD;
    --fin-shadow-soft: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 30px -14px rgba(0, 0, 0, .55);
    --fin-shadow-pop:  0 4px 14px rgba(0, 0, 0, .32), 0 28px 64px -18px rgba(0, 0, 0, .72);
    color-scheme: dark;
  }
}

/* ═══ 5. GLOBAL BASE ══════════════════════════════════════════════════ */
html, body { background: var(--fin-bg); }
body {
  margin: 0;
  font-family: var(--fin-font-body);
  color: var(--fin-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus-visible { outline: 2px solid var(--fin-focus); outline-offset: 2px; }
@media print { html, body { background: #FFFFFF !important; } }