/**
 * Every value that carries design intent is declared here and nowhere else:
 * a component file references tokens, never literals. Brand values come from
 * henara.eu — see docs/palette.md.
 */
:root {
    --font-ui: Arial, Helvetica, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;

    --fs-3xs: 10px;
    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-base: 15px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 20px;
    --fs-3xl: 22px;
    --fs-4xl: 24px;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-none: 1;
    --lh-tight: 1.2;
    --lh-snug: 1.3;
    --lh-normal: 1.45;
    --lh-loose: 1.5;

    --ls-snug: 0.01em;
    --ls-caps: 0.06em;

    --sp-1: 2px;
    --sp-2: 4px;
    --sp-3: 6px;
    --sp-4: 8px;
    --sp-5: 10px;
    --sp-6: 12px;
    --sp-7: 16px;
    --sp-8: 18px;
    --sp-9: 24px;
    --sp-10: 32px;
    --sp-11: 48px;

    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;

    --bw: 1px;
    --bw-thick: 2px;
    --bw-stripe: 3px;

    --focus-w: 2px;
    /* A cell is a printed box a few pixels tall; the full ring would cover the
       character being typed into it. */
    --focus-w-fine: 1px;
    --focus-offset: 1px;
    --focus-inset: -2px;

    --shadow-raise: 0 1px 1px rgba(16, 20, 28, 0.05);
    --shadow-chip: 0 1px 2px rgba(2, 74, 85, 0.18);
    --shadow-card: 0 1px 2px rgba(16, 20, 28, 0.04), 0 8px 24px rgba(16, 20, 28, 0.06);
    --shadow-sheet: 0 8px 40px rgba(0, 0, 0, 0.2);
    --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.35);
    --shadow-bottomsheet: 0 -8px 32px rgba(0, 0, 0, 0.28);
    --shadow-help: 0 10px 30px rgba(0, 0, 0, 0.22);
    --shadow-invalid: 0 0 0 2px rgba(220, 38, 38, 0.45);
    /* Drawn inside the box on purpose: an outer ring on a single-character cell
       is cut off by the ink filter's region, and the entry layer's background
       is clipped to its glyphs, so it cannot carry a wash. */
    --shadow-field-hot: inset 0 0 0 1px var(--hover-ring),
                        inset 0 0 0 999px var(--hover-wash);

    --scrim: rgba(0, 0, 0, 0.45);
    --scrim-strong: rgba(0, 0, 0, 0.55);

    --t-fast: 120ms;
    --t-base: 160ms;
    --t-slow: 200ms;
    --ease: ease-out;
    --press-shift: 1px;
    --o-disabled: 0.5;
    --dim-hover: 0.97;

    --control-h: 30px;
    --control-h-sm: 32px;
    --touch-h: 44px;
    --icon-btn: 36px;
    --icon-btn-sm: 28px;
    --bar-btn-w: 40px;
    --check-size: 20px;
    --badge-min-w: 20px;
    --thumb: 180px;
    /* As tall as a list may stand in a dialog before it scrolls itself. */
    --picklist-h: 420px;

    /* A tabular field: the row number's gutter, and the narrowest a cell may
       be before the table scrolls instead. */
    --col-num: 40px;
    --col-cell: 110px;

    /* The widths a column of prose or controls is allowed to be. */
    --measure-xs: 340px;
    --measure-sm: 420px;
    --measure-md: 520px;
    --measure: 640px;

    --z-raise-1: 1;
    --z-raise-2: 2;
    --z-raise-3: 3;
    --z-raise-4: 4;
    --z-rail: 100;
    --z-card: 200;
    --z-overlay: 1000;
    --z-backdrop: 1050;
    --z-sheet: 1100;
    --z-intro: 2000;

    /* Surfaces */
    --bg-page: #e5e7eb;
    --bg-surface: #ffffff;
    --bg-section: #f3f4f6;
    --bg-row: #f9fafb;
    --bg-input-focus: #f2f8f9;

    /* Text */
    --text: #1a1a1a;
    --text-soft: #4b5563;
    --text-muted: #6b7280;
    --text-faint: #9ca3af;
    --text-on-dark: #ffffff;
    --text-th: #374151;
    --text-control: #1e293b;

    --ok-bg: #d1fae5;
    --ok-fg: #065f46;
    --ok-border: #047857;
    --ok-accent: #10b981;

    --warn-bg: #fffbeb;
    --warn-fg: #92400e;
    --warn-border: #b45309;
    --warn-tag-bg: #fef3c7;

    --err-bg: #fef2f2;
    --err-fg: #991b1b;
    --err-border: #b91c1c;
    --err-tag-bg: #fee2e2;
    --err-strong: #dc2626;
    --err-wash: rgba(254, 226, 226, 0.65);

    --border-soft: #e5e7eb;
    --border-row: #f1f5f9;
    --border-control: #cbd5e1;

    --brand-teal: #067b83;
    --brand-teal-dark: #024a55;
    --brand-teal-tint: #eaf0f1;
    --brand-magenta: #c1348b;
    --brand-magenta-dark: #a92d7a;
    /* henara.eu's own button hover. Only 3.9:1 on white, so it may carry no
       text — the CTA hover darkens instead. */
    --brand-magenta-bright: #fc006d;

    --focus-ring: var(--brand-teal);
    /* Hovering is a state, so it is teal — the faintest reading of it the two
       brand colours allow. */
    --hover-wash: color-mix(in srgb, var(--brand-teal) 12%, transparent);
    --hover-ring: color-mix(in srgb, var(--brand-teal) 50%, transparent);

    /* The app's own surface, deliberately not the Vordruck's: red is left to
       mean the printed form and a genuine failure. */
    --chrome-ink: #1b1e24;
    --chrome-ink-soft: #3f4652;
    /* Dark enough for 4.5:1 on --chrome-sunken, not only on white. */
    --chrome-muted: #5b6270;
    --chrome-line: #dfe2e7;
    --chrome-line-strong: #c9cdd4;
    --chrome-hover: #f2f4f7;
    --chrome-sunken: var(--brand-teal-tint);
    --chrome-accent: var(--brand-teal);
    --chrome-accent-dark: var(--brand-teal-dark);
    --chrome-cta: var(--brand-magenta);
    --chrome-cta-hover: var(--brand-magenta-dark);
    --chrome-danger: #b42318;
    --chrome-danger-bg: #fef3f2;

    /* Wide enough for the longest action label without wrapping, and no
       wider: below the width at which the help card is dropped, the rail is
       what the Vordruck is scaled against. */
    --rail-width: 192px;
    --rail-inset: 16px;
    --rail-gap: 24px;
    --bar-height: 48px;

    --form-scale: 1;
    /* Vo.Fit overrides this so a printed line always covers a whole number of
       device pixels; at a fractional zoom it otherwise rounds up in one place
       and down in another and the rules come out uneven. */
    --vo-hairline: 1px;

    --ink1: #101418;
    --ink2: #101418;
    --ink-alpha: 1;
    --var-color: 0;
    --entry-font: var(--font-ui);
    --entry-size: 16px;
    --cell-size: 16px;
    --tick-size: 17px;

    --stamp-ink: #3b4870;
    --stamp-alpha: 0.78;
    --stamp-font: 'Share Tech Mono', 'Courier Prime', monospace;
    --stamp-size: 8px;
    --stamp-size-lead: 9px;
    --stamp-size-soft: 7px;
    --stamp-lh: 1.18;
    --stamp-ls: 0.01em;
    --sig-ink-dark: #14181f;
    --sig-ink-blue: #1e3fb4;
    --sig-ink-drift: 0.22;
    --sig-core-min: 0.9;
    --sig-core-max: 2.6;
    --sig-weight-drift: 0.34;
    --sig-tail-share: 0.55;
    --sig-core-alpha: 0.92;
    --sig-tail-alpha: 0.3;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Parts of the chrome set an explicit `display`, which would otherwise beat
   the user-agent rule for [hidden]. */
[hidden] {
    display: none !important;
}