/* Design tokens: the only place raw colours, sizes, shadows and durations live.
   Light is the default; [data-theme="dark"] on <html> switches (set by theme.js / the pre-paint script).
   Catalog and usage: .claude/skills/the-couturier/references/tokens.md */

:root {
    color-scheme: light;

    /* Surfaces */
    --ap-bg: #f5f4f1;              /* page: warm paper */
    --ap-surface: #ffffff;         /* cards, panels, grids, dialogs */
    --ap-surface-2: #faf9f7;       /* alternate rows, headers, hover on surface */
    --ap-surface-sunken: #ecebe6;  /* wells, inputs on surface-2, skeletons */
    --ap-overlay: 20, 18, 15;      /* rgb triplet for modal backdrops */

    /* Ink */
    --ap-ink: #1f1d1a;
    --ap-ink-rgb: 31, 29, 26;
    --ap-ink-muted: #625d55;       /* secondary text, AA on bg and surface */
    --ap-ink-subtle: #8f897f;      /* placeholders, disabled, decorations (not body text) */
    --ap-ink-inverse: #f7f5f0;     /* text on ink fills */

    /* Lines */
    --ap-line: #e6e3dc;
    --ap-line-strong: #d3cfc6;

    /* Accent: brass */
    --ap-accent: #85662a;
    --ap-accent-rgb: 133, 102, 42;
    --ap-accent-hover: #6f5422;
    --ap-accent-ink: #ffffff;      /* text on accent fill */
    --ap-accent-soft: #f3ecdd;     /* tinted backgrounds, selected rows */
    --ap-accent-line: #dcc9a2;

    /* Live / now: cognac. Use sparingly. */
    --ap-live: #b9531c;
    --ap-live-soft: #fbe9de;

    /* Status: fg is readable as text on surface, soft is a background, line is a border */
    --ap-success: #2e7a4d;  --ap-success-rgb: 46, 122, 77;   --ap-success-soft: #e4f1e8;  --ap-success-line: #b6d8c2;
    --ap-warning: #8f5d00;  --ap-warning-rgb: 143, 93, 0;    --ap-warning-soft: #fbf1d9;  --ap-warning-line: #ecd39a;
    --ap-warning-fill: #e9b949; /* solid warning marker (flag stripe, badge fill with ink text) */
    --ap-danger: #b02a22;   --ap-danger-rgb: 176, 42, 34;    --ap-danger-soft: #f9e4e2;   --ap-danger-line: #ebbab5;
    --ap-info: #2a6788;     --ap-info-rgb: 42, 103, 136;     --ap-info-soft: #e2eef5;     --ap-info-line: #b4d0e0;

    /* Domain markers (always with icon + text, never colour alone) */
    --ap-suspicious: #6a3fa5; --ap-suspicious-soft: #efe8f8;
    --ap-house: #3f5b6d;      --ap-house-soft: #e6edf1;

    /* Focus */
    --ap-focus: rgba(133, 102, 42, .45);

    /* Typography */
    --ap-font-body: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --ap-font-heading: "Manrope", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ap-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
    --ap-text-xs: .75rem;
    --ap-text-sm: .8125rem;
    --ap-text-base: .9375rem;
    --ap-text-md: 1.0625rem;
    --ap-text-lg: 1.25rem;
    --ap-text-xl: 1.625rem;
    --ap-text-2xl: 2.125rem;
    --ap-text-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    --ap-weight-heading: 500;
    --ap-weight-strong: 600;
    --ap-leading: 1.55;
    --ap-leading-tight: 1.15;
    --ap-tracking-heading: -.02em;

    /* Shape */
    --ap-radius-xs: 6px;
    --ap-radius-sm: 8px;
    --ap-radius: 12px;
    --ap-radius-lg: 18px;
    --ap-radius-pill: 999px;

    /* Elevation */
    --ap-shadow-1: 0 1px 2px rgba(31, 29, 26, .05), 0 1px 1px rgba(31, 29, 26, .03);
    --ap-shadow-2: 0 2px 4px rgba(31, 29, 26, .04), 0 8px 24px -6px rgba(31, 29, 26, .10);
    --ap-shadow-3: 0 4px 8px rgba(31, 29, 26, .05), 0 24px 48px -12px rgba(31, 29, 26, .20);

    /* Spacing (layout rhythm; inside components Bootstrap spacers are fine) */
    --ap-space-1: .25rem;
    --ap-space-2: .5rem;
    --ap-space-3: .75rem;
    --ap-space-4: 1rem;
    --ap-space-5: 1.5rem;
    --ap-space-6: 2rem;
    --ap-space-7: 3rem;
    --ap-gutter: clamp(1rem, .6rem + 1.6vw, 2rem);
    --ap-sidebar-width: 15.5rem;
    --ap-topbar-height: 3.75rem;

    /* Motion */
    --ap-ease: cubic-bezier(.25, .46, .45, .94);   /* reference ease: hovers, small moves */
    --ap-ease-out: cubic-bezier(.22, 1, .36, 1);    /* entrances */
    --ap-ease-in-out: cubic-bezier(.65, 0, .35, 1); /* drawers, toggles */
    --ap-dur-fast: 150ms;
    --ap-dur: 260ms;
    --ap-dur-slow: 520ms;
    --ap-rise: 14px;                               /* entrance travel distance */
}

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

    --ap-bg: #131210;
    --ap-surface: #1c1a17;
    --ap-surface-2: #22201c;
    --ap-surface-sunken: #0f0e0c;
    --ap-overlay: 0, 0, 0;

    --ap-ink: #eeebe5;
    --ap-ink-rgb: 238, 235, 229;
    --ap-ink-muted: #a8a196;
    --ap-ink-subtle: #7a746b;
    --ap-ink-inverse: #161512;

    --ap-line: #2c2a26;
    --ap-line-strong: #3b3833;

    --ap-accent: #cfa962;
    --ap-accent-rgb: 207, 169, 98;
    --ap-accent-hover: #ddbd80;
    --ap-accent-ink: #1a1712;
    --ap-accent-soft: #2b2518;
    --ap-accent-line: #5a4a2a;

    --ap-live: #f0894a;
    --ap-live-soft: #33221a;

    --ap-success: #72c595;  --ap-success-rgb: 114, 197, 149;  --ap-success-soft: #1a2a21;  --ap-success-line: #2f5a41;
    --ap-warning: #e9b949;  --ap-warning-rgb: 233, 185, 73;   --ap-warning-soft: #2d2515;  --ap-warning-line: #5e4b1f;
    --ap-warning-fill: #e9b949;
    --ap-danger: #f08c82;   --ap-danger-rgb: 240, 140, 130;   --ap-danger-soft: #331d1b;   --ap-danger-line: #6a3530;
    --ap-info: #84bcd9;     --ap-info-rgb: 132, 188, 217;     --ap-info-soft: #17252d;     --ap-info-line: #2f4f61;

    --ap-suspicious: #bea0ec; --ap-suspicious-soft: #261f33;
    --ap-house: #a5bccb;      --ap-house-soft: #1c252b;

    --ap-focus: rgba(207, 169, 98, .5);

    /* Dark mode: shadows barely show, so surfaces separate by tone and lines instead. */
    --ap-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ap-shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 24px -8px rgba(0, 0, 0, .55);
    --ap-shadow-3: 0 6px 12px rgba(0, 0, 0, .4), 0 28px 56px -16px rgba(0, 0, 0, .7);
}