/* ================================================================
   ATOM Interstate — Design System Tokens
   ================================================================
   Single source of truth for the entire app.
   Every page imports this file. Change a value here,
   every page responds.

   Dark mode (default) uses the warm redesign palette — solid warm
   navy surfaces, cream text, light-blue/pink/amber accents (S122).
   Light mode uses opaque whites on cool gray.

   Usage:  <link rel="stylesheet" href="/theme.css">
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   1. COLOR PALETTE
   ──────────────────────────────────────────────────────────────── */

:root, [data-theme="dark"] {
    /* ── WARM REDESIGN PALETTE (S122, 2026-05-29) ──────────────────
       Dark mode flipped from the cold navy/glass look to the warm
       redesign palette (source: atom-day-tabs-demo.html). Surfaces
       are now SOLID warm navy (progressively lighter so layering
       still reads), text is cream, accents are light-blue / pink /
       amber. Changing values here repaints the entire app — every
       page is var()-driven off these tokens. The Day view was painted
       first (S122) and these values match it exactly. Light mode
       (below) is intentionally unchanged — warm-light is a later pass.
       ─────────────────────────────────────────────────────────────── */

    /* Page background */
    --bg:             #1a2540;

    /* Elevated bg — sticky bars / raised navy (warm redesign) */
    --bg-elev:        #1f2c4d;

    /* Surfaces — solid warm navy (replaces the old glass overlays) */
    --card:           #243355;   /* cards, sections */
    --card-hover:     #2c3d63;   /* card hover state */
    --surface-raised: #2c3d63;   /* (deprecated for overlays — use --surface-solid) */
    --surface-inset:  #1b294a;   /* form inputs, recessed areas */
    --nav-selected:   rgba(91,158,255,0.16);   /* section nav "you are here" tint (ATO-569) */
    /* SOLID overlay surface — use for popups, dropdowns, modals,
       sticky headers, drawers, sheets. */
    --surface-solid:  #243355;

    /* Borders */
    --border:         #36487a;
    --border-light:   #2f3f6e;
    --border-strong:  #44588f;
    --border-focus:   var(--blue);

    /* Text */
    --text:           #f4f1e8;
    --text-secondary: #c9d0e3;
    --text-muted:     #8b97b8;

    /* Brand accents — warm redesign */
    --accent:         #5b9eff;
    --accent-light:   rgba(91,158,255,0.16);
    --accent-soft:    rgba(91,158,255,0.08);
    --blue:           #5b9eff;
    --blue-soft:      rgba(91,158,255,0.16);
    --blue-light:     rgba(91,158,255,0.16);
    --blue-subtle:    rgba(91,158,255,0.08);
    --pink:           #ff6b8a;
    --pink-soft:      rgba(255,107,138,0.14);
    --pink-light:     rgba(255,107,138,0.14);
    --pink-subtle:    rgba(255,107,138,0.08);
    --teal:           #2dd4bf;
    --teal-soft:      rgba(45,212,191,0.14);
    --teal-light:     rgba(45,212,191,0.14);
    --teal-subtle:    rgba(45,212,191,0.08);

    /* Logo colors — May 2026 mark.
       These sit between the dark-mode and light-mode brand variants by
       design, so the mark reads consistently on either surface without
       a theme swap. Override per surface if absolutely needed. */
    --logo-orbital:   #F33DB8;   /* the five orbital sweeps */
    --logo-nucleus:   #20B39F;   /* the central nucleus circle */

    /* Semantic colors — warm redesign */
    --green:          #4ade80;
    --green-soft:     rgba(74,222,128,0.14);
    --green-light:    rgba(74,222,128,0.14);
    --green-dark:     #248A3D;
    --red:            #FF6B6B;
    --red-soft:       rgba(255,107,107,0.12);
    --red-light:      rgba(255,107,107,0.12);
    --gold:           #fbbf24;
    --gold-soft:      rgba(251,191,36,0.14);
    --gold-light:     rgba(251,191,36,0.14);
    --white:          #FFFFFF;

    /* Hover / interaction */
    --surface-hover:  rgba(244,241,232,0.05);

    /* Shadows */
    --shadow-sm:       0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md:       0 4px 16px rgba(0,0,0,0.4);
    --shadow-elevated: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-focus:    0 0 0 3px rgba(91,158,255,0.25);

    /* Glass */
    --glass-blur:      blur(12px);
    --glass-glow:      inset 0 1px 0 0 rgba(255,255,255,0.05);

    /* Modal / drawer backdrop tint — used by RightDrawer, can be used
       by Modal.jsx etc. for the dimmed underlay. */
    --backdrop: rgba(0,0,0,0.45);
}

[data-theme="light"] {
    /* PHL S104 2026-05-17 — "less LIGHT. Add some colors. Give it
       life and not make it look like a hospital. ADA compliant."
       Bg warms from cold gray-blue (#F4F6FA) to a brand-tinted
       violet-warm cream (#F2F1F6). Surface-inset gets noticeably
       darker (#E9E6EE) so sections read with real depth instead of
       white-on-white. Card-hover picks up a subtle blue tint so
       interactive surfaces feel alive on hover. Body-level soft
       tinted gradient (below) sits behind everything. All text
       contrast tokens unchanged — text:bg stays >14:1 AAA. */
    --bg:             #F2F1F6;

    --card:           #FFFFFF;
    --card-hover:     #EFF6FF;
    --surface-raised: #FFFFFF;
    --surface-inset:  #E9E6EE;
    --nav-selected:   rgba(20,130,255,0.10);    /* brand-tinted "you are here" */
    /* SOLID overlay surface — used for dropdowns, modals, the
       sub-navigation band, ATOM 101 panel, etc. Without this override,
       --surface-solid falls back to the dark-mode #131730 and these
       surfaces render dark navy on a light page. White matches --card
       and reads as elevated against --bg. */
    --surface-solid:  #FFFFFF;

    --border:         rgba(26,29,46,0.12);
    --border-light:   rgba(26,29,46,0.07);
    --border-strong:  rgba(26,29,46,0.18);
    --border-focus:   #1168D4;

    --text:           #1A1D2E;
    --text-secondary: #4A4C5C;
    --text-muted:     #5A6172;            /* darkened from #6B7280 → 5.6:1 on bg (was 4.8) */

    --accent:         #1168D4;
    --accent-light:   rgba(17,104,212,0.13);
    --accent-soft:    rgba(17,104,212,0.07);
    --blue:           #1168D4;
    --blue-soft:      rgba(17,104,212,0.13);
    --blue-light:     rgba(17,104,212,0.13);
    --blue-subtle:    rgba(17,104,212,0.07);
    --pink:           #C4219E;
    --pink-soft:      rgba(196,33,158,0.13);
    --pink-light:     rgba(196,33,158,0.13);
    --pink-subtle:    rgba(196,33,158,0.07);
    --teal:           #0A8F7E;
    --teal-soft:      rgba(10,143,126,0.13);
    --teal-light:     rgba(10,143,126,0.13);
    --teal-subtle:    rgba(10,143,126,0.07);

    /* Logo colors — same values across themes. The mark was designed to
       read on either surface without a swap. */
    --logo-orbital:   #F33DB8;
    --logo-nucleus:   #20B39F;

    --green:          #16A34A;
    --green-soft:     rgba(22,163,74,0.10);
    --green-light:    rgba(22,163,74,0.10);
    --green-dark:     #0A7E5C;
    --red:            #DC2626;
    --red-soft:       rgba(220,38,38,0.08);
    --red-light:      rgba(220,38,38,0.08);
    --gold:           #B45309;
    --gold-soft:      rgba(180,83,9,0.08);
    --gold-light:     rgba(180,83,9,0.08);
    --white:          #FFFFFF;

    --surface-hover:  rgba(0,0,0,0.04);

    --shadow-sm:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:       0 4px 12px rgba(0,0,0,0.08);
    --shadow-elevated: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-focus:    0 0 0 3px rgba(17,104,212,0.20);

    --glass-blur:      blur(12px);
    --glass-glow:      none;

    --backdrop:        rgba(0,0,0,0.30);
}

/* Soft brand-tint gradient on the body in light mode — gives the page
   visual depth so cards have something to sit ON, not a flat hospital
   wall. Pink in the top-left, teal in the bottom-right — both ATOM
   brand colors, both well under 0.04 alpha so contrast stays AAA.
   Fixed attachment so it doesn't scroll with content. Phil S104. */
[data-theme="light"] body {
  background:
    radial-gradient(1200px circle at 0% 0%,    rgba(196,33,158,0.035), transparent 60%),
    radial-gradient(1200px circle at 100% 100%, rgba(10,143,126,0.035), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}


/* ────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY
   ──────────────────────────────────────────────────────────────── */

:root {
    --font:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Courier New', monospace;

    /* Type scale */
    --text-xs:   10px;   /* fine print, badge text, build version */
    --text-sm:   11px;   /* labels, section titles (typically uppercase) */
    --text-base: 13px;   /* body text, buttons, form values */
    --text-md:   14px;   /* form inputs, default UI text */
    --text-lg:   16px;   /* card headings, modal titles */
    --text-xl:   18px;   /* page headings, wordmark */
    --text-2xl:  22px;   /* hero headings */
    --text-3xl:  28px;   /* large stat values */

    /* Font weights */
    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* Line heights */
    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.7;
}


/* ────────────────────────────────────────────────────────────────
   3. SPACING & LAYOUT
   ──────────────────────────────────────────────────────────────── */

:root {
    /* Spacing scale (use for padding, margin, gap) */
    --space-1:  4px;
    --space-2:  6px;
    --space-3:  8px;
    --space-4:  10px;
    --space-5:  12px;
    --space-6:  14px;
    --space-7:  16px;
    --space-8:  20px;
    --space-9:  24px;
    --space-10: 32px;
    --space-11: 40px;
    --space-12: 60px;

    /* Border radii */
    --radius-xs:   6px;    /* small elements: checkboxes, chips */
    --radius-sm:   8px;    /* buttons, inputs, small cards */
    --radius:      12px;   /* standard cards, modals */
    --radius-lg:   16px;   /* large cards, main containers */
    --radius-pill: 20px;   /* pill buttons, badges, tags */
    --radius-full: 50%;    /* avatars, circular buttons */

    /* Max widths */
    --max-w-sm:    480px;  /* modals, dropdowns */
    --max-w-md:    640px;  /* settings panels */
    --max-w-lg:    800px;  /* team page, narrow layouts */
    --max-w-xl:   1100px;  /* admin dashboards */
    --max-w-2xl:  1280px;  /* money page, full layouts */
}


/* ────────────────────────────────────────────────────────────────
   4. BASE RESET
   ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ────────────────────────────────────────────────────────────────
   5. TYPOGRAPHY CLASSES
   ──────────────────────────────────────────────────────────────── */

/* Section label — the all-caps treatment used everywhere */
.t-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

/* Card title (inside a card header) */
.t-card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

/* Page heading */
.t-heading {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: var(--leading-tight);
}

/* Card heading */
.t-subheading {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: var(--leading-tight);
}

/* Body text */
.t-body {
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    color: var(--text);
    line-height: var(--leading-normal);
}

/* Secondary text */
.t-secondary {
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    color: var(--text-secondary);
}

/* Small / caption */
.t-small {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
}

/* Fine print */
.t-fine {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* Stat value (big number) */
.t-stat {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: 1;
}

/* Monospace (keys, codes) */
.t-mono {
    font-family: var(--font-mono);
    font-size: var(--text-base);
}


/* ────────────────────────────────────────────────────────────────
   6. FORM ELEMENTS
   ──────────────────────────────────────────────────────────────── */

/* Form label — always uppercase */
.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

/* Text input / select / textarea */
.form-input {
    width: 100%;
    padding: var(--space-5) var(--space-6);
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: var(--text-md);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}
.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ────────────────────────────────────────────────────────────────
   7. BUTTONS
   ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-8);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { opacity: 0.9; }
.btn:active { opacity: 0.8; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Primary (blue CTA) */
.btn-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #FFFFFF;
}

/* Secondary (ghost with border) */
.btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-secondary:hover { border-color: var(--border-strong); }

/* Danger */
.btn-danger {
    background: var(--red);
    border-color: var(--red);
    color: #FFFFFF;
}

/* Danger soft (less aggressive) */
.btn-danger-soft {
    background: var(--red-soft);
    border-color: transparent;
    color: var(--red);
}

/* Teal accent */
.btn-teal {
    background: var(--teal);
    border-color: var(--teal);
    color: #FFFFFF;
}

/* Ghost (no border, no background) */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text); background: var(--card); }

/* Small button */
.btn-sm {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    border-radius: var(--radius-xs);
}

/* Icon button (square, no label) */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-secondary);
}
.btn-icon:hover { background: var(--card-hover); color: var(--text); }


/* ────────────────────────────────────────────────────────────────
   8. CARDS
   ──────────────────────────────────────────────────────────────── */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-9);
    backdrop-filter: var(--glass-blur);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-7);
}

.card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}


/* ────────────────────────────────────────────────────────────────
   9. BADGES & PILLS
   ──────────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.3px;
}

.badge-blue   { background: var(--blue-soft);  color: var(--blue); }
.badge-pink   { background: var(--pink-soft);  color: var(--pink); }
.badge-teal   { background: var(--teal-soft);  color: var(--teal); }
.badge-green  { background: var(--green-soft); color: var(--green); }
.badge-red    { background: var(--red-soft);   color: var(--red); }
.badge-gold   { background: var(--gold-soft);  color: var(--gold); }
.badge-muted  { background: var(--card-hover); color: var(--text-muted); }


/* ────────────────────────────────────────────────────────────────
   10. MODAL / OVERLAY
   ──────────────────────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

/* Bottom-sheet style modal — vanilla money.html parity (DealMemoScannerModal,
   ImportModeModal, settlement-import preview, etc. depend on these). React
   theme was missing them entirely; the inner content rendered transparent,
   so the page bled through the modal. */
.modal-sheet {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
[data-theme="light"] .modal-sheet {
    background: var(--card);
    border-color: var(--border);
}
.modal-handle {
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 16px;
}
.modal-text {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.6;
}

/* Form layout — vanilla money.html parity. Modal forms (DealMemoScanner,
   ImportMode, etc.) use these classes; without them, two-column rows
   collapsed into a single tall stack ("cramped" form) and selects rendered
   with browser-default chrome instead of the design-system look. */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-group {
    margin-bottom: 14px;
}
.form-select {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font, 'DM Sans', sans-serif);
    font-size: 14px;
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    /* Inline chevron — matches design system (no browser-default arrow). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.form-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
}

.modal {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-9);
    max-width: var(--max-w-sm);
    width: 100%;
    box-shadow: var(--shadow-elevated);
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-1);
}

.modal-sub {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: var(--space-9);
}


/* ────────────────────────────────────────────────────────────────
   11. TOAST
   ──────────────────────────────────────────────────────────────── */

.toast {
    position: fixed;
    bottom: var(--space-9);
    left: 50%;
    transform: translateX(-50%);
    background: #1D1D1F;
    color: #FFFFFF;
    padding: var(--space-5) var(--space-9);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-elevated);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s;
}
.toast.show    { opacity: 1; }
.toast.success { border-left: 3px solid var(--teal); }
.toast.error   { border-left: 3px solid var(--red); }


/* ────────────────────────────────────────────────────────────────
   12. UTILITY CLASSES
   ──────────────────────────────────────────────────────────────── */

/* Text colors */
.text-blue  { color: var(--blue); }
.text-pink  { color: var(--pink); }
.text-teal  { color: var(--teal); }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-gold  { color: var(--gold); }
.text-muted { color: var(--text-muted); }

/* Background helpers */
.bg-blue-soft  { background: var(--blue-soft); }
.bg-pink-soft  { background: var(--pink-soft); }
.bg-teal-soft  { background: var(--teal-soft); }
.bg-green-soft { background: var(--green-soft); }
.bg-red-soft   { background: var(--red-soft); }
.bg-gold-soft  { background: var(--gold-soft); }