/* Design tokens — the single place literal design values live. Loaded first (after the Kendo swatch) so
   every other file can reference them. Rule: a stylesheet uses a token whenever one exists for the value;
   a raw literal only appears for a deliberate off-scale value taken pixel-exact from Figma, with the node
   noted in a comment. New repeated values get added here, not repeated as literals.

   WHAT LIVES WHERE
   - Color: Kendo's own --kendo-color-* tokens (theme-driven, rebrand-safe). Never hardcode a hex that a
     Kendo token already provides, and never add a `var(--kendo-…, #hex)` fallback — capes-theme.css loads
     first and always defines them, so a fallback can only drift out of date.
   - Spacing (padding/margin/gap): Kendo's scale, --kendo-spacing-N = N x 4px (0-5=2, 1=4, 1-5=6, 2=8,
     3=12, 4=16, 5=20, 6=24, 7=28, 8=32, 10=40). Sizes (width/height/flex-basis) are layout dimensions,
     not spacing, and stay literal. Off-grid Figma values (3px, 7px, 9px) stay literal.
   - Border radius: Kendo's scale (sm=2, md=4, lg=6, xl=8, xxl=12, xxxl=16, full=pill); 50% stays literal.
   - Everything below is what Kendo does not provide: font families, the Figma type scale, font weights
     Kendo lacks, divider/border alphas, disabled text, and status accent colors. */

:root {
    /* Font families. Both are loaded from Google Fonts in App.razor. */
    --lh-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --lh-font-display: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Type scale (Figma sizes). Values Kendo also defines alias its token so the theme stays the source. */
    --lh-text-2xs: var(--kendo-font-size-xs); /* 10px */
    --lh-text-xs: 11px;
    --lh-text-sm: var(--kendo-font-size-sm); /* 12px */
    --lh-text-md: 13px;
    --lh-text-lg: var(--kendo-font-size-md); /* 14px */
    --lh-text-xl: var(--kendo-font-size-lg); /* 16px */
    --lh-text-2xl: 18px;
    --lh-text-3xl: var(--kendo-font-size-xl); /* 20px */
    --lh-text-4xl: 24px;
    --lh-text-5xl: 28px;
    --lh-text-6xl: 36px;

    /* Line height for compact label/value text, where the browser-default ~1.4 leading adds visible extra
       space above and below the glyphs on top of the stack's own gap. */
    --lh-leading-tight: 1.2;

    /* Font weights. 800 has no Kendo equivalent (its scale jumps bold 700 -> black 900). */
    --lh-weight-normal: var(--kendo-font-weight-normal);
    --lh-weight-semibold: var(--kendo-font-weight-semibold);
    --lh-weight-bold: var(--kendo-font-weight-bold);
    --lh-weight-extrabold: 800;

    /* Dividers / hairlines, all the same neutral ink at increasing strength. None match a semantic Kendo
       token; the two that do are referenced directly instead: 26% is
       var(--tb-kendo-color-button-border-normal) and 72% is var(--kendo-color-border). */
    --lh-border-faint: rgba(36, 36, 36, 0.07);
    --lh-border-subtle: rgba(36, 36, 36, 0.1);
    --lh-border: rgba(36, 36, 36, 0.14);

    /* Placeholder/disabled text from Figma node 898:7758 — a fixed ink alpha rather than a Kendo state mix. */
    --lh-text-disabled: rgba(36, 36, 36, 0.3);

    /* Status accents with no semantic Kendo token (used via --lh-status-color, see dashboard-header.css). */
    --lh-status-sailed: #13A10E;
    --lh-status-rendering: #7E5F0D;

    /* Cargo edit row Save/Cancel icon buttons: the designer's own custom green/red, deliberately not the
       theme's (lighter) semantic success/error tokens — see the note in vessel-file-cards.css. */
    --lh-color-save: #1D8348;
    --lh-color-cancel: #A52F23;
}