/* ChekHealth 2026 design tokens (design system artboard 11).
   Loaded after app.css and modern.css so the legacy variables those files define resolve to the same values. */

@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colour: core palette */
    --ck-primary: #087f80;
    --ck-primary-hover: #066668;
    --ck-primary-pressed: #055657;
    --ck-primary-soft: #e6f4f4;
    --ck-ink: #15232b;
    --ck-slate: #697786;
    --ck-canvas: #f8faf9;
    --ck-surface: #ffffff;
    --ck-border: #e5e7eb;
    --ck-border-strong: #cfd6dc;

    /* Colour: semantic. The solid colour is for icons and fills; -text is the AA-contrast colour for words on -soft. */
    --ck-success: #16a34a;
    --ck-success-text: #166534;
    --ck-success-soft: #e8f6ec;
    --ck-info: #2563eb;
    --ck-info-text: #1d4ed8;
    --ck-info-soft: #eaf1fe;
    --ck-warning: #d97706;
    --ck-warning-text: #92400e;
    --ck-warning-soft: #fef3e2;
    --ck-critical: #dc2626;
    --ck-critical-text: #b91c1c;
    --ck-critical-soft: #fdecec;

    /* Spacing scale, 4px base unit */
    --ck-space-1: 0.25rem;
    --ck-space-2: 0.5rem;
    --ck-space-3: 0.75rem;
    --ck-space-4: 1rem;
    --ck-space-6: 1.5rem;

    /* Radius */
    --ck-radius-sm: 0.375rem;
    --ck-radius-md: 0.5rem;
    --ck-radius-lg: 0.75rem;

    /* Control heights (compact density is the default) */
    --ck-control-sm: 32px;
    --ck-control-md: 36px;
    --ck-control-lg: 40px;

    /* Type */
    --ck-font: "Geist", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ck-font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --ck-text-page-title: 600 2rem/2.5rem var(--ck-font);
    --ck-text-section-title: 600 1.25rem/1.75rem var(--ck-font);
    --ck-text-body: 400 1rem/1.5rem var(--ck-font);
    --ck-text-label: 500 0.875rem/1.25rem var(--ck-font);
    --ck-text-helper: 400 0.875rem/1.25rem var(--ck-font);

    /* Focus and elevation */
    --ck-focus-ring: 0 0 0 2px var(--ck-surface), 0 0 0 4px var(--ck-primary);
    --ck-shadow-panel: 0 1px 3px rgb(21 35 43 / 6%);
    --ck-shadow-raised: 0 8px 28px rgb(21 35 43 / 14%);

    /* Layout */
    --ck-dock-height: 64px;
    --ck-rail-width: 280px;
    --ck-inspector-width: 360px;

    /* Legacy variables from app.css / modern.css resolve to the 2026 palette. */
    --brand: var(--ck-primary);
    --brand-hover: var(--ck-primary-hover);
    --brand-soft: var(--ck-primary-soft);
    --ink: var(--ck-ink);
    --shell-border: var(--ck-border);
    --shell-muted: var(--ck-slate);
    --shell-surface: var(--ck-canvas);
    --row-selected: #e2f3f3;
    --danger-text: var(--ck-critical-text);
    --allergy-bg: var(--ck-critical-soft);
    --allergy-border: var(--ck-critical);
}

/* Numbers line up in tables and totals everywhere. */
html { font-variant-numeric: tabular-nums; }

body {
    font-family: var(--ck-font);
    font-size: 0.9375rem;
    color: var(--ck-ink);
    background: var(--ck-canvas);
}

code, kbd, samp, pre, .ck-mono { font-family: var(--ck-font-mono); }

/* A single focus treatment for keyboard users; the ring never relies on colour alone (it is also a 2px gap + 2px line). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--ck-focus-ring);
    border-radius: var(--ck-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Syncfusion theme variables follow the palette. */
:root {
    --color-sf-primary: rgba(8, 127, 128, 1);
    --color-sf-primary-bg-color-hover: var(--ck-primary-hover);
    --color-sf-primary-bg-color-pressed: var(--ck-primary-pressed);
    --color-sf-content-bg-color-selected: var(--ck-primary);
}