/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * genre: modern-minimal · macrostructure: Split Studio / Proof-to-Control
 * theme: studied-DNA (Trengo, Signal AI, and supplied Texly references)
 * design-system: design.md · designed-as-app · palette: supplied Palette.png
 * nav: N10 · footer: Ft5 · contrast: pass (40–41) · honest: pass (46)
 * chrome: pass (47) · responsive: pass (34, 49–57) · icons: pass (30)
 * slop review: reference-led centred hero retained to honour the explicit Trengo brief
 * display: Bricolage Grotesque · body: Geist · mono: IBM Plex Mono
 */

:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-alternate: #fafafa;
    --color-border-base: #eaeaea;
    --color-secondary-text: #6e6e6e;
    --color-neutral-soft: #f0f1f3;
    --color-honey: #fdbf2d;
    --color-navy: #061c3a;
    --color-navy-surface: #0b2a52;
    --color-honey-hover: color-mix(
        in srgb,
        var(--color-honey) 92%,
        var(--color-black)
    );
    /* Compatibility aliases keep existing surfaces on the shared palette. */
    --color-empty: var(--color-white);
    --color-snow: var(--color-alternate);
    --color-asphalt: var(--color-secondary-text);
    --color-charcoal: var(--color-black);

    --color-paper: var(--color-white);
    --color-paper-subtle: var(--color-alternate);
    --color-paper-strong: var(--color-alternate);
    --color-surface: var(--color-white);
    --color-surface-raised: var(--color-white);
    --color-ink: var(--color-black);
    --color-ink-soft: var(--color-black);
    --color-ink-muted: var(--color-secondary-text);
    --color-ink-hover: #141414;
    --color-on-dark-muted: #a3a3a3;
    --color-line: var(--color-border-base);
    --color-line-strong: color-mix(
        in srgb,
        var(--color-border-base) 92%,
        var(--color-black)
    );
    --color-control-border: var(--color-secondary-text);
    --color-accent: var(--color-honey);
    --color-accent-hover: var(--color-honey-hover);
    --color-accent-fill-hover: var(--color-honey-hover);
    --color-accent-text: var(--color-honey);
    --color-accent-soft: var(--color-neutral-soft);
    --color-accent-ink: var(--color-black);
    --color-focus: var(--color-black);

    /* Semantic states are reserved for status and validation, never branding. */
    --color-success: oklch(43% 0.095 147);
    --color-success-fill: oklch(68% 0.13 147);
    --color-success-ink: oklch(35% 0.08 147);
    --color-success-soft: oklch(94% 0.035 147);
    --color-warning: oklch(42% 0.09 72);
    --color-warning-fill: oklch(73% 0.13 72);
    --color-warning-ink: oklch(38% 0.08 72);
    --color-warning-soft: oklch(95% 0.04 72);
    --color-danger: oklch(48% 0.16 27);
    --color-danger-fill: oklch(62% 0.18 27);
    --color-danger-ink: oklch(43% 0.14 27);
    --color-danger-soft: oklch(95% 0.035 27);
    --color-scrim: oklch(22% 0 0 / 0.42);
    --color-shadow: oklch(22% 0 0 / 0.1);

    /* Product workbench: neutral, high-contrast surfaces for long sessions. */
    --color-product-canvas: #f4f5f7;
    --color-product-surface: #ffffff;
    --color-product-surface-muted: #f0f1f3;
    --color-product-ink: #17181b;
    --color-product-ink-muted: #5f636b;
    --color-product-line: #dfe2e7;
    --color-product-line-strong: #c5cad1;
    --color-product-sidebar: #ffffff;
    --color-product-sidebar-hover: #f2f3f5;
    --color-product-sidebar-ink: #1b1d22;
    --color-product-sidebar-muted: #656b76;
    --color-product-accent-strong: #fdbf2d;
    --color-product-gradient-end: #dc8a00;

    --font-family-display:
        'Bricolage Grotesque Variable', 'Microsoft YaHei UI', 'Noto Sans SC',
        'Nirmala UI', 'Noto Sans Gurmukhi', ui-sans-serif, sans-serif;
    --font-family-body:
        'Geist Variable', 'Microsoft YaHei UI', 'Noto Sans SC', 'Nirmala UI',
        'Noto Sans Gurmukhi', ui-sans-serif, sans-serif;
    --font-family-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 9rem;
    --space-5xl: 12rem;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.25rem;
    --text-lg: 1.5625rem;
    --text-xl: 1.9531rem;
    --text-2xl: 2.4414rem;
    --text-3xl: 3.0518rem;
    --text-4xl: 3.8147rem;
    --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
    --text-display-small: clamp(2.4rem, 4vw + 0.75rem, 4.5rem);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-enter: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 140ms;
    --dur-base: 260ms;
    --dur-menu: 280ms;
    --dur-slow: 760ms;
    --dur-nav: 560ms;

    --rule-hair: 1px;
    --rule-strong: 2px;
    --radius-small: 0.375rem;
    --radius-medium: 0.625rem;
    --radius-large: 0.75rem;
    --radius-panel: 1rem;
    --radius-pill: 999px;

    --page-max: 80rem;
    --page-gutter: clamp(1rem, 4vw, 2.5rem);
    --prose-max: 65ch;
    --shadow-low: 0 1px 2px var(--color-shadow);
    --shadow-high: 0 18px 52px var(--color-shadow);
    --shadow-auth-surface: 0 20px 48px -32px
        color-mix(in srgb, var(--color-black) 34%, transparent);

    --z-base: 1;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}

:root[data-theme='night'] {
    --color-paper: var(--color-navy);
    --color-paper-subtle: #082447;
    --color-paper-strong: var(--color-navy-surface);
    --color-surface: #082447;
    --color-surface-raised: var(--color-navy-surface);
    --color-ink: var(--color-white);
    --color-ink-soft: var(--color-border-base);
    --color-ink-muted: var(--color-on-dark-muted);
    --color-ink-hover: var(--color-border-base);
    --color-line: #262626;
    --color-line-strong: #5c5c5c;
    --color-control-border: var(--color-secondary-text);
    --color-accent: var(--color-honey);
    --color-accent-hover: var(--color-honey-hover);
    --color-accent-fill-hover: var(--color-honey-hover);
    --color-accent-text: var(--color-honey);
    --color-accent-soft: color-mix(
        in srgb,
        var(--color-honey) 14%,
        var(--color-surface)
    );
    --color-accent-ink: var(--color-black);
    --color-focus: var(--color-honey);
    --color-success: oklch(83% 0.095 147);
    --color-success-fill: oklch(72% 0.12 147);
    --color-success-ink: oklch(92% 0.045 147);
    --color-success-soft: oklch(45% 0.05 147);
    --color-warning: var(--color-neutral-soft);
    --color-warning-fill: var(--color-honey);
    --color-warning-ink: var(--color-neutral-soft);
    --color-warning-soft: color-mix(
        in oklch,
        var(--color-charcoal) 72%,
        var(--color-honey)
    );
    --color-danger: oklch(82% 0.11 27);
    --color-danger-fill: oklch(72% 0.16 27);
    --color-danger-ink: oklch(90% 0.07 27);
    --color-danger-soft: oklch(45% 0.07 27);
    --color-scrim: oklch(18% 0 0 / 0.62);
    --color-shadow: oklch(18% 0 0 / 0.3);
    --color-product-canvas: #101114;
    --color-product-surface: #17191d;
    --color-product-surface-muted: #22252a;
    --color-product-ink: #f5f6f7;
    --color-product-ink-muted: #b3b7bf;
    --color-product-line: #2e3137;
    --color-product-line-strong: #454a52;
    --color-product-sidebar: #090a0c;
    --color-product-sidebar-hover: #1b1e23;
    --color-product-sidebar-ink: #f6f7f8;
    --color-product-sidebar-muted: #a9afb8;
    --color-product-accent-strong: #ffd36a;
    --color-product-gradient-end: #c96a22;
}