/*
 * Dash design tokens — "Registry" visual identity.
 *
 * This file is the SINGLE source of truth for color, type, spacing, radius,
 * shadow and motion primitives. It intentionally replaces the old teal/zinc
 * dark-admin palette in theme.css. See design-system.md for full rationale.
 *
 * Mechanism: unchanged from before. `html[data-theme="dark"]` is toggled by
 * existing JS; this file only supplies the values under each selector.
 *
 * Contrast: pairs marked "// AA <ratio>" have been checked against WCAG 2.1
 * relative-luminance contrast (4.5:1 body text, 3:1 large text/UI, 7:1 noted
 * where AAA is cleared). Re-check with a contrast tool if you change a value.
 */

:root {
    /* ---------------------------------------------------------------- */
    /* Color — Light ("Ledger on paper")                                 */
    /* ---------------------------------------------------------------- */

    /* Warm paper neutrals — NOT the old cold zinc/white scale. */
    --paper: #f7f5f0;            /* app background: warm off-white paper */
    --surface: #ffffff;          /* cards, panels, table body */
    --surface-sunken: #efece3;   /* recessed wells: toolbars, table head, code */
    --surface-raised: #ffffff;   /* popovers/menus/modals (see shadow-floating) */

    --ink-strong: #1c1a17;       /* headings, primary numerals — 15.1:1 on paper */
    --ink: #33302a;              /* body text — 11.8:1 on paper */
    --ink-soft: #46423c;         /* secondary body text — 9.3:1 on paper (AAA) */
    --ink-faint: #837c6d;        /* captions/meta — 4.6:1 on paper (AA, small text) */

    --rule: #ddd7c8;             /* hairline dividers (the primary separator) */
    --rule-strong: #c6bea9;      /* input borders, emphasized dividers */

    /* Accent: deep registry indigo. Distinct from the old teal (#0d9488) and
       from the old monochrome zinc accent. Used sparingly — for links,
       focus, primary actions, active nav, and small emphasis marks only. */
    --accent: #4338ca;           /* white-on-accent = 7.9:1 (AAA) */
    --accent-strong: #2f2996;    /* hover/active state, ~10.8:1 with white */
    --accent-soft: #eceafc;      /* tint background for badges/active rows */
    --accent-ink: #332c86;       /* text-on-accent-soft — 8.1:1 on accent-soft */
    --ring: rgba(67, 56, 202, .35);

    /* Semantic status — warm-paper-safe, distinct hues per state (not just
       accent-tinted greys) so status reads at a glance in dense tables. */
    --success: #1f7a4d;          /* on paper ≈ 5.3:1 */
    --success-soft: #e3f2e9;
    --success-ink: #14532d;
    --warning: #92400e;          /* on paper ≈ 6.6:1 */
    --warning-soft: #fbf0da;
    --warning-ink: #6c2e05;
    --danger: #b3261e;           /* on paper ≈ 5.6:1 */
    --danger-soft: #fbe6e3;
    --danger-ink: #7f1a14;
    --pending: #6b6456;          /* warm neutral, on paper ≈ 4.7:1 */
    --pending-soft: #efece3;
    --pending-ink: #4a453a;

    color-scheme: light;

    /* ---------------------------------------------------------------- */
    /* Type                                                              */
    /* ---------------------------------------------------------------- */

    /* Display/serif for headings and section titles — gives the "ledger /
       documented record" character. Falls back to a serious system serif;
       no external CDN, add a self-hosted woff2 later via @font-face if
       desired (see design-system.md). */
    --font-display: "Source Serif 4", "Iowan Old Style", "Georgia", "Times New Roman", serif;
    /* Grotesk sans for UI chrome and body copy — neutral, high legibility
       at small sizes. */
    --font-body: "Inter", "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Tabular numerals for HR data: attendance %, leave balances, IDs. */
    --font-numeric: "Inter", ui-sans-serif, system-ui, sans-serif;

    --text-2xs: .6875rem;   /* 11px — table meta, badge labels */
    --text-xs: .75rem;      /* 12px — captions, helper text */
    --text-sm: .8125rem;    /* 13px — dense table cells, secondary UI */
    --text-base: .9375rem;  /* 15px — body copy, form inputs */
    --text-md: 1.0625rem;   /* 17px — lead paragraphs, card totals */
    --text-lg: 1.25rem;     /* 20px — H4 / panel titles */
    --text-xl: 1.5rem;      /* 24px — H3 / section headers */
    --text-2xl: 1.875rem;   /* 30px — H2 / page titles */
    --text-3xl: 2.375rem;   /* 38px — H1 / auth & hero display */

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tight: -.01em;
    --tracking-normal: 0;
    --tracking-wide: .04em;
    --tracking-widest: .09em;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---------------------------------------------------------------- */
    /* Spacing — 4px grid                                                */
    /* ---------------------------------------------------------------- */
    --space-1: .25rem;   /* 4px */
    --space-2: .5rem;    /* 8px */
    --space-3: .75rem;   /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-14: 3.5rem;  /* 56px */
    --space-18: 4.5rem;  /* 72px */

    /* ---------------------------------------------------------------- */
    /* Radius — mostly square/precise ("ledger" is cut, not molded).     */
    /* Old theme used 10–22px blob radii everywhere; this scale is       */
    /* deliberately tighter and reserves the larger step for overlays.   */
    /* ---------------------------------------------------------------- */
    --radius-xs: 2px;    /* badges, pills' corner base, checkboxes */
    --radius-sm: 4px;    /* inputs, buttons, table action targets */
    --radius-md: 6px;    /* cards/panels */
    --radius-lg: 10px;   /* modals, sheets, toasts */
    --radius-pill: 999px;

    /* ---------------------------------------------------------------- */
    /* Shadow — flat by default; separation comes from the --rule        */
    /* hairline and --surface-sunken fills, not drop shadows. Shadows    */
    /* are reserved for things that float above the page.                */
    /* ---------------------------------------------------------------- */
    --shadow-flat: none;
    --shadow-raised: 0 1px 0 rgba(28, 26, 23, .04);
    --shadow-floating: 0 8px 24px rgba(28, 26, 23, .12), 0 1px 2px rgba(28, 26, 23, .06);
    --shadow-modal: 0 24px 64px rgba(28, 26, 23, .22);

    /* ---------------------------------------------------------------- */
    /* Motion                                                            */
    /* ---------------------------------------------------------------- */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-decelerate: cubic-bezier(0, 0, .2, 1);
    --ease-accelerate: cubic-bezier(.4, 0, 1, 1);
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 280ms;

    /* ---------------------------------------------------------------- */
    /* Layout                                                            */
    /* ---------------------------------------------------------------- */
    --topbar-height: 60px;     /* slim identity bar */
    --index-height: 48px;      /* horizontal section/index rail */
    --shell-max-width: 1440px;
    --row-height-compact: 40px;  /* dense table row */
    --row-height-cozy: 52px;     /* default table row */

    /* Breakpoints are expressed in component/media-query comments, not
       custom properties (CSS can't use var() inside @media), but are
       pinned here for reference: tablet/collapse 880px, phone 600px. */
}

html[data-theme="dark"] {
    /* ---------------------------------------------------------------- */
    /* Color — Dark ("Ledger by lamplight")                              */
    /* Warm near-black, not the old cold #09090b zinc-black.             */
    /* ---------------------------------------------------------------- */
    --paper: #16140f;
    --surface: #1e1b15;
    --surface-sunken: #262219;
    --surface-raised: #241f18;

    --ink-strong: #f5f1e8;       /* ≈ 16.7:1 on paper */
    --ink: #ded7c6;              /* ≈ 12.9:1 on paper */
    --ink-soft: #cec7b6;         /* ≈ 10.9:1 on paper (AAA) */
    --ink-faint: #948c78;        /* ≈ 4.8:1 on paper (AA, small text) */

    --rule: #332d20;
    --rule-strong: #4a4230;

    --accent: #a29bff;           /* ink-strong-on-accent for buttons; ≈6.0:1 as text on paper */
    --accent-strong: #beb8ff;
    --accent-soft: #2a2760;
    --accent-ink: #cdc8ff;       /* text on accent-soft ≈ 8.4:1 */
    --ring: rgba(162, 155, 255, .4);

    --success: #6fcf9a;
    --success-soft: #1c3527;
    --success-ink: #a9e8c4;
    --warning: #e3a655;
    --warning-soft: #3a2c15;
    --warning-ink: #f0c793;
    --danger: #ef8f86;
    --danger-soft: #3c1e1b;
    --danger-ink: #f6bab3;
    --pending: #b3ab97;
    --pending-soft: #2a261c;
    --pending-ink: #d8d1bf;

    color-scheme: dark;

    /* Shadows read differently on dark paper: less ambient blur, more
       reliance on a lighter fill + hairline to lift a surface. */
    --shadow-raised: 0 1px 0 rgba(0, 0, 0, .5);
    --shadow-floating: 0 12px 32px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-modal: 0 28px 72px rgba(0, 0, 0, .65);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 1ms;
        --duration-base: 1ms;
        --duration-slow: 1ms;
    }
}