/* CluPilot design tokens — one set for every surface.
 *
 * Light, confident, one warm accent. The public site, the customer portal and
 * the operator console draw from this file and differ only in density: same
 * colours, same radii, same button hierarchy, same status vocabulary. A
 * customer who signs in must not feel handed to a different product, and an
 * operator switching between the two should not have to relearn anything.
 *
 * Framework-neutral custom properties (work in Tailwind v3 or v4). Contrast
 * ratios are noted where they were the reason for the value.
 */
:root {
    /* ── Surfaces ─────────────────────────────────────────────────────────
       The ground is a shade darker than the cards, so a card lifts off the
       page without a shadow doing the work. */
    --bg:            #f6f6f8;
    --surface:       #ffffff;
    --surface-2:     #fafafb;
    --surface-hover: #f2f2f5;

    /* Lines carry the structure. Depth is used sparingly and warmly. */
    --border:        #e9e9ee;
    --border-strong: #dcdce4;

    /* ── Text ─────────────────────────────────────────────────────────────
       Near-black rather than pure black: on a light ground pure black reads
       as a printing error, not as emphasis. */
    --text-strong:   #17171c;   /* headings — 16.4:1 on white */
    --text:          #43434e;   /* body — 9.8:1 */
    --text-muted:    #6e6e7a;   /* secondary copy — 5.0:1, AA for body text */
    --text-faint:    #b4b4be;   /* decoration only: rules, placeholder glyphs */

    /* ── Accent ───────────────────────────────────────────────────────────
       Orange appears in FEW places, but one of them is allowed to be large —
       a whole closing panel. Frequency low, area high; the reverse reads as
       editorial annotation rather than as brand. */
    --accent:        #f97316;   /* rings, bars, chart strokes, the logo mark */
    --accent-hover:  #d95f0c;
    --accent-active: #b8500a;   /* solid fills and text — 5.0:1 with white */
    --accent-press:  #974208;
    --accent-subtle: #fff3e9;
    --accent-border: #e8cdb2;
    --accent-ring:   rgba(249, 115, 22, .38);
    --on-accent:     #ffffff;
    /* #f97316 as TEXT on white is only 2.9:1, so anything read uses the
       darker tone. This is the single most common way the palette gets
       broken, which is why the two have different names. */
    --accent-text:   #b8500a;

    /* ── Ink fields ───────────────────────────────────────────────────────
       The dark surfaces: the site's contrast bands, the sign-in panel, the
       operator sidebar. Neutral-warm, never pure black. */
    --plate:       #16151b;
    --plate-2:     #201f27;
    --plate-rule:  #33323d;
    --plate-text:  #c9c7d2;
    --plate-muted: #918f9d;   /* 4.6:1 on --plate */

    /* ── Status ───────────────────────────────────────────────────────────
       Independent of the brand. Amber must keep meaning "this needs you", so
       "scheduled" and "informational" are blue — next to an orange brand the
       two are otherwise indistinguishable. */
    --success: #1c7c50; --success-bg: #eaf6f0; --success-border: #c3e3d3;
    --success-bright: #30b15c;  /* dots, rings and charts — never small text */
    --warning: #9a5b0b; --warning-bg: #fdf4e7; --warning-border: #eed9b3;
    --danger:  #a8302a; --danger-bg:  #fbeeed; --danger-border:  #eec9c6;
    --info:    #1e5aa8; --info-bg:    #eef4fa; --info-border:    #c3d6ea;

    /* ── Type ─────────────────────────────────────────────────────────────
       One family, used assertively. Mono is for operational data only —
       storage, dates, addresses, versions, invoice figures — where tabular
       figures let a column of numbers line up. Never for headings. */
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    /* Kept for compatibility; the display voice is now the sans at weight 700.
       A serif headline made every page read as a document. */
    --font-serif: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

    --text-xs: 12px; --text-sm: 13px; --text-base: 14.5px; --text-md: 16px;
    --text-lg: 18px; --text-xl: 22px; --text-2xl: 30px; --text-3xl: 40px;

    --lh-tight: 1.12; --lh-normal: 1.55;
    --tracking-tight: -0.03em;
    --tracking-label: 0.07em;

    /* ── Radius ───────────────────────────────────────────────────────────
       Scaled to object size. One value everywhere is what makes an interface
       read as a design-system specification rather than as a product. */
    --radius-sm: 9px;    /* chips, small controls */
    --radius: 11px;      /* buttons, inputs */
    --radius-lg: 16px;   /* cards */
    --radius-xl: 22px;   /* full-width panels, product frames */
    --radius-pill: 999px;

    /* Warm, broad and low — a neutral grey drop shadow belongs to a different
       design language and reads as cold against this ground. */
    --shadow-xs: 0 1px 2px rgba(40, 24, 15, .04);
    --shadow-sm: 0 2px 6px rgba(40, 24, 15, .06);
    --shadow-md: 0 16px 44px -18px rgba(40, 24, 15, .20);

    --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms;
    --ease: cubic-bezier(.2, .7, .2, 1);

    --focus-ring: 0 0 0 3px var(--accent-ring);
}

/*
 * The small-caps label: the template calls it "the typographic signature,
 * carried across all three surfaces". It is written once here so the size
 * cannot drift apart between the panel, the console and the site — which is
 * exactly how it ended up at 11px in one place and 11.5px in another.
 */
.lbl {
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}