/* ─── Typography ─────────────────────────────────────────── */
body {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ─── The app is always light — never follow the OS dark scheme.
   `only light` also forces native form controls to render light. ─── */
:root { color-scheme: only light; }

/* ═══════════════════════════════════════════════════════════
   LAYER 1 — PRIMITIVE PALETTE
   ═══════════════════════════════════════════════════════════ */
:root {
    --hue:    262;   /* indigo default */
    --chroma: 0.24;  /* oklch chroma */
}

/* ═══════════════════════════════════════════════════════════
   LAYER 2 — SEMANTIC TOKENS (what components consume)
   ═══════════════════════════════════════════════════════════ */
:root {
    /* ── Surfaces ──────────────────────────────────────────── */
    --bg:           #f6f7fb;
    --surface:      #ffffff;
    --surface-2:    #f0f2f8;
    --surface-3:    #e8ebf4;
    --overlay:      rgb(0 0 0 / 0.45);

    /* ── Border ────────────────────────────────────────────── */
    --border:       #dde1ee;
    --border-2:     #c8cde2;

    /* ── Ink (text) ────────────────────────────────────────── */
    --ink:          #141428;
    --ink-2:        #454570;
    --ink-muted:    #8a8ab0;
    --ink-disabled: #b8b8d0;

    /* ── Accent scale (derived from --hue / --chroma) ─────── */
    --accent:          oklch(50% var(--chroma) var(--hue));
    --accent-2:        oklch(62% calc(var(--chroma) * 0.85) calc(var(--hue) + 14));
    --accent-fg:       #ffffff;
    --accent-subtle:   oklch(96% calc(var(--chroma) * 0.12) var(--hue));
    --accent-muted:    oklch(88% calc(var(--chroma) * 0.25) var(--hue));
    --accent-emphasis: oklch(42% var(--chroma) var(--hue));
    --accent-glow:     oklch(50% var(--chroma) var(--hue) / 0.20);

    /* ── Status colours ────────────────────────────────────── */
    --success:      #059669;
    --warning:      #d97706;
    --danger:       #dc2626;
    --info:         #0891b2;

    /* ── Shape ─────────────────────────────────────────────── */
    --radius-xs:    0.25rem;
    --radius:       0.5rem;
    --radius-md:    0.625rem;
    --radius-lg:    0.875rem;
    --radius-xl:    1.25rem;
    --radius-full:  9999px;

    /* ── Elevation / Shadow ────────────────────────────────── */
    --shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm:    0 1px 4px 0 rgb(0 0 0 / 0.08);
    --shadow:       0 2px 8px -1px rgb(0 0 0 / 0.10), 0 1px 3px -1px rgb(0 0 0 / 0.06);
    --shadow-md:    0 4px 16px -2px rgb(0 0 0 / 0.12), 0 2px 6px -2px rgb(0 0 0 / 0.06);
    --shadow-lg:    0 12px 32px -4px rgb(0 0 0 / 0.14), 0 4px 10px -4px rgb(0 0 0 / 0.08);
    --shadow-accent:0 4px 16px -2px var(--accent-glow);

    /* ── Spacing rhythm ─────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;

    /* ── Motion ─────────────────────────────────────────────── */
    --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 120ms;
    --duration:      200ms;
    --duration-slow: 350ms;
    --transition:    var(--duration) var(--ease-out);

    /* ── Layout tokens ──────────────────────────────────────── */
    --toolbar-height: 3.5rem;
}

/* ═══════════════════════════════════════════════════════════
   THEME DEFINITIONS — set --hue / --chroma; accent scale derives.
   ═══════════════════════════════════════════════════════════ */
[data-theme="indigo"], :root {
    --hue:    262;
    --chroma: 0.24;
}

[data-theme="emerald"] {
    --hue:    162;
    --chroma: 0.18;
    --accent: oklch(44% 0.18 162);
}

[data-theme="sunset"] {
    --hue:      30;
    --chroma:   0.22;
    --accent:   oklch(56% 0.22 30);
    --accent-2: oklch(68% 0.20 60);
}

[data-theme="mono-pro"] {
    --hue:      300;
    --chroma:   0.28;
    --accent:   oklch(22% 0.0 0);
    --accent-2: oklch(55% 0.28 300);
    --accent-fg: #ffffff;
    --accent-subtle: oklch(96% 0.02 0);
    --accent-glow:   oklch(22% 0.0 0 / 0.15);
    --bg:  #f9f9f9;
    --ink: #0d0d0d;
}

[data-theme="ocean"] {
    --hue:      230;
    --chroma:   0.22;
    --accent-2: oklch(62% 0.18 200);
    --bg:        #f4f6fb;
    --surface-2: #eaeff8;
}

[data-theme="oxblood"] {
    --hue:      14;
    --chroma:   0.20;
    --accent:   oklch(34% 0.20 14);
    --accent-2: oklch(50% 0.08 60);
    --bg:        #faf8f5;
    --surface:   #fffefb;
    --surface-2: #f2ede7;
    --border:    #e0d8ce;
    --ink:       #1c1410;
    --ink-2:     #4a3f34;
    --ink-muted: #8a7a6e;
}

[data-theme="grape"] {
    --hue:      290;
    --chroma:   0.30;
    --accent-2: oklch(62% 0.30 320);
}

/* Dark mode intentionally removed — PaperTrail is always a clean, white UI. */

/* ═══════════════════════════════════════════════════════════
   GLOBAL BASE STYLES
   ═══════════════════════════════════════════════════════════ */
body {
    background-color: var(--bg);
    color: var(--ink-2);
    font-size: 0.9375rem;   /* 15px */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }

/* Smooth theme transitions */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color var(--duration-slow) var(--ease-out),
                border-color var(--duration-slow) var(--ease-out),
                color var(--duration-fast) var(--ease-out) !important;
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* ═══════════════════════════════════════════════════════════
   TABLE STYLES
   ═══════════════════════════════════════════════════════════ */
.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;   /* 14px */
}

.doc-table th {
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: left;
    white-space: nowrap;
    padding: 0.5em 0.75em;
    color: var(--th-text, var(--table-th-text, var(--ink)));
    background-color: var(--th-bg, var(--table-th-bg, transparent));
}

.doc-table td {
    padding: 0.4375em 0.75em;
    vertical-align: top;
    color: var(--ink-2);
}

.doc-table tr { transition: background-color var(--duration-fast) var(--ease-out); }

.doc-table td.align-right,
.doc-table th.align-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 1. Clean (default) */
[data-table-style="clean"] {
    --table-th-bg: transparent;
    --table-th-text: var(--ink);
}
[data-table-style="clean"] .doc-table thead tr {
    border-bottom: 2px solid var(--border);
}
[data-table-style="clean"] .doc-table tbody tr:nth-child(even) {
    background-color: var(--surface-2);
}
[data-table-style="clean"] .doc-table tbody tr:hover {
    background-color: var(--surface-3);
}

/* 2. Ruled */
[data-table-style="ruled"] {
    --table-th-bg: transparent;
    --table-th-text: var(--ink);
}
[data-table-style="ruled"] .doc-table thead tr {
    border-bottom: 2px solid var(--accent-muted);
}
[data-table-style="ruled"] .doc-table tbody tr {
    border-bottom: 1px solid var(--border);
}
[data-table-style="ruled"] .doc-table tbody tr:last-child {
    border-bottom: none;
}
[data-table-style="ruled"] .doc-table tbody tr:hover {
    background-color: var(--accent-subtle);
}

/* 3. Boxed */
[data-table-style="boxed"] {
    --table-th-bg: var(--surface-2);
    --table-th-text: var(--ink);
}
[data-table-style="boxed"] .doc-table th,
[data-table-style="boxed"] .doc-table td {
    border: 1px solid var(--border);
}
[data-table-style="boxed"] .doc-table thead th {
    border-color: var(--border-2);
}
[data-table-style="boxed"] .doc-table tbody tr:hover td {
    background-color: var(--accent-subtle);
}

/* 4. Striped */
[data-table-style="striped"] {
    --table-th-bg: transparent;
    --table-th-text: var(--ink);
}
[data-table-style="striped"] .doc-table thead tr {
    border-bottom: 2px solid var(--border);
}
[data-table-style="striped"] .doc-table tbody tr:nth-child(odd) {
    background-color: var(--accent-subtle);
}
[data-table-style="striped"] .doc-table tbody tr:hover {
    background-color: var(--accent-muted);
}

/* 5. Shaded Header */
[data-table-style="shaded-header"] {
    --table-th-bg: var(--accent);
    --table-th-text: var(--accent-fg);
}
[data-table-style="shaded-header"] .doc-table thead tr {
    border-bottom: none;
}
[data-table-style="shaded-header"] .doc-table tbody tr:nth-child(even) {
    background-color: var(--surface-2);
}
[data-table-style="shaded-header"] .doc-table tbody tr:hover {
    background-color: var(--surface-3);
}

/* Shared: summary / tfoot row */
.doc-table tfoot tr td {
    border-top: 2px solid var(--accent-muted);
    font-weight: 700;
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */
@media print {
    :root {
        --bg:        #ffffff !important;
        --surface:   #ffffff !important;
        --surface-2: #f4f4f4 !important;
        --surface-3: #ebebeb !important;
        --border:    #cccccc !important;
        --border-2:  #aaaaaa !important;
        --ink:       #000000 !important;
        --ink-2:     #222222 !important;
        --ink-muted: #555555 !important;
    }

    @page {
        margin: 15mm;
    }

    body {
        background: #ffffff;
        color: #000000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .no-print { display: none !important; }
    .print-only { display: block !important; }

    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr    { break-inside: avoid; page-break-inside: avoid; }

    * { box-shadow: none !important; }
}