/*
 * qLink design tokens (ADR 0006). Every color, font, radius, spacing step, and size lives here, and nowhere else.
 * Components use the role tokens (--color-*). The role tokens reference the brand tokens (--brand-*), which
 * come from the Insight logo. Change the brand values to rebrand; change the role values to retune a theme.
 *
 * js/preferences.js sets data-theme="light" or "dark" on <html> before first paint, resolving "System"
 * from the OS setting. So the dark theme needs only the one block below.
 */

:root {
    /* Brand, sampled from the logo: navy #002870 to #000838, red #900000 to #500000. */
    --brand-navy: #0b2a6e;
    --brand-navy-deep: #001a4f;
    --brand-navy-ink: #0f1a33;
    --brand-red: #8f0f0f;
    --brand-red-deep: #5a0000;
    --brand-white: #ffffff;

    /* Light theme: option C (app-shell-6). Cool blue-grey grounds, white cards, the brand navy as the rail. */
    color-scheme: light;
    --color-bg: #eef2f7;
    --color-surface: var(--brand-white);
    --color-surface-muted: #e3e9f1;
    --color-surface-hover: #f2f5f9;
    --color-border: #d3dbe6;
    --color-border-strong: #b8c3d3;
    --color-text: #111c33;
    --color-text-muted: #56627a;
    --color-primary: var(--brand-navy);
    --color-primary-hover: var(--brand-navy-deep);
    --color-on-primary: var(--brand-white);
    --color-accent: var(--brand-red);
    --color-focus: #2f6fd6;
    --color-focus-ring: color-mix(in srgb, var(--color-focus) 28%, transparent);
    --color-row-hover: color-mix(in srgb, var(--color-primary) 5%, transparent);
    --color-selected: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    --color-success: #1a7f37;
    --color-danger: var(--brand-red);
    --color-danger-surface: #fbeaea;
    --color-code: #8f2a5c;
    --color-logo-tile: var(--brand-white);
    --color-scrim: rgb(17 28 51 / 0.36);
    --shadow-overlay: 0 16px 48px rgb(17 28 51 / 0.22);

    /* The navy band: the brand navy in both themes, so light and dark read as one product. The client's rail and the
       intake's masthead are bands. */
    --color-band: var(--brand-navy);
    --color-band-raised: #14367f;
    --color-on-band: var(--brand-white);
    --color-on-band-muted: #bccae6;
    --color-rail: var(--color-band);
    --color-rail-active: var(--color-band-raised);
    --color-on-rail: var(--color-on-band);
    --color-on-rail-muted: var(--color-on-band-muted);
    --color-context: var(--color-surface);

    /* Type */
    --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, "SF Mono", monospace;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* Shape and spacing */
    --radius-sm: 4px;
    --radius-md: 8px;
    --border-width: 1px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Layout */
    --rail-width: 76px;
    --rail-height-narrow: 56px;
    --context-width: 340px;
    --drawer-width: 440px;
    --logo-height: 30px;
    --content-max-width: 1400px;
    --menu-width: 220px;
    --notification-panel-width: 340px;
    --notification-list-height: 420px;
    --login-card-width: 360px;
    --transition-fast: 120ms ease;
    --control-height: 32px;
}

:root[data-theme="dark"] {
    /* Dark theme: the brand navy darkened, never neutral black, with the navy and red lifted for contrast. */
    color-scheme: dark;
    --color-bg: #0a1020;
    --color-surface: #162038;
    --color-surface-muted: #0f1729;
    --color-surface-hover: #1c2843;
    --color-border: #26324d;
    --color-border-strong: #3a4869;
    --color-text: #e5eaf4;
    --color-text-muted: #9ba7bf;
    --color-primary: #9db8f2;
    --color-primary-hover: #b8ccf5;
    --color-on-primary: #0a1020;
    --color-accent: #ef8b8b;
    --color-focus: #9db8f2;
    --color-focus-ring: color-mix(in srgb, var(--color-focus) 35%, transparent);
    --color-row-hover: color-mix(in srgb, var(--color-primary) 7%, transparent);
    --color-selected: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
    --color-success: #62c784;
    --color-danger: #ef8b8b;
    --color-danger-surface: #2c1621;
    --color-code: #e59ac0;
    /* The logo has navy text on a transparent background, so it keeps its white tile in dark mode too. */
    --color-logo-tile: var(--brand-white);
    --color-scrim: rgb(0 0 0 / 0.55);
    --shadow-overlay: 0 16px 48px rgb(0 0 0 / 0.45);
    --color-context: #111a2e;
}