/* ============================================================================
   Design tokens — CRM landing
   ----------------------------------------------------------------------------
   Direction: "kommutator" (switchboard). The product takes an incoming line —
   Instagram, WhatsApp, a phone call — routes it to a named operator and starts
   a clock on it. So the visual world is equipment, but printed rather than
   backlit: enamel label stock, white instrument cards, engraved mono labels,
   one amber signal lamp, one teal patched-through mark.

   Light by default. The one loud colour is `signal`, and it is spent only on
   the live/unanswered state and the primary action.

   Deliberately NOT the app's own look. The CRM UI is white-label — every
   customer repaints it with their own primary colour, so the product marketing
   needs an identity that doesn't move. The app is soft (rounded-2xl, Inter);
   this is precise (small radii, Archivo + Plex).
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------- colour
       Ink and lamp colours are separated on purpose: `signal` / `patch` are
       lamp fills and are never used for text; `*-ink` are their readable
       counterparts on paper. */
    --c-paper: #f2f3ef; /* label stock — the page ground            */
    --c-card: #ffffff; /* instrument card — panels, wells          */
    --c-lift: #e8eae4; /* recessed strip — panel headers, insets   */
    --c-graphite: #14181c; /* engraved ink — primary text, dark band   */
    --c-slate: #1e252b; /* the dark band's raised surface           */
    --c-steel: #4f5962; /* secondary ink — 6.41:1 on paper          */
    --c-steel-dim: #8a97a3; /* secondary ink ON the dark band           */
    --c-enamel: #e7e9e4; /* light text ON the dark band              */
    /* The signal used to be amber. It now carries the product's own teal, so
       the lamps, the waiting clock and the primary action all belong to the
       same mark that sits in the header. The names stay: `signal` is still the
       live/unanswered state, `patch` is still answered — they are simply two
       tones of one colour now rather than two colours. */
    --c-signal: var(--c-brand); /* indicator lamp — live, waiting, primary  */
    --c-signal-ink: var(--c-brand-deep); /* readable signal text — 9.8:1 on paper    */
    --c-brand: #0d7377; /* the product mark's own teal              */
    --c-brand-deep: #00443e; /* the mark's darker half                   */
    --c-brand-lit: #4fc3bb; /* the mark, readable on the dark band      */
    --c-patch: #3fb0a2; /* patched through — answered, assigned, ok */
    --c-patch-ink: #1f6259; /* readable patch text — 6.39:1 on paper    */
    --c-danger: #b3261e; /* only for real failure states             */
    --c-paper-deep: #ecede8; /* second paper tone — alternating bands     */

    /* ------------------------------------------------------------ surfaces */
    --surface-base: var(--c-paper);
    --surface-raised: var(--c-card);
    --surface-lift: var(--c-lift);
    --surface-sunk: var(--c-paper-deep);
    --surface-inverse: var(--c-graphite);
    --surface-inverse-raised: var(--c-slate);

    /* ---------------------------------------------------------------- text */
    --text-primary: var(--c-graphite);
    --text-secondary: var(--c-steel);
    --text-inverse: var(--c-enamel);
    --text-signal: var(--c-signal-ink);

    /* -------------------------------------------------------------- border
       Hairlines rather than shadows: equipment panels are separated by seams,
       not by drop shadows. */
    --border-hairline: rgba(20, 24, 28, 0.12);
    --border-strong: rgba(20, 24, 28, 0.26);
    --border-inverse: rgba(231, 233, 228, 0.14);

    /* --------------------------------------------------------------- type */
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

    /* Display sizes use clamp so the headline holds its proportions from
       360px to desktop without a pile of breakpoints. */
    --t-display-xl: clamp(2.5rem, 6.2vw, 4.75rem);
    --t-display-l: clamp(2rem, 4.6vw, 3.25rem);
    --t-display-m: clamp(1.55rem, 3.2vw, 2.375rem);
    --t-heading: 1.25rem;
    --t-body-l: 1.125rem;
    --t-body: 1rem;
    --t-body-s: 0.9375rem;
    --t-caption: 0.8125rem;
    --t-label: 0.6875rem; /* uppercase eyebrows, panel labels */

    --lh-tight: 0.96; /* display only — Archivo is tall */
    --lh-snug: 1.2;
    --lh-normal: 1.55;
    --lh-relaxed: 1.7;

    --tr-display: -0.032em; /* Archivo wants tightening at size */
    --tr-normal: 0;
    --tr-label: 0.14em; /* engraved-label spacing */

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

    /* -------------------------------------------------------------- space
       4px base. Named by use, not by t-shirt size, so the page reads. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;

    /* ------------------------------------------------------------- radius
       Small on purpose. This is equipment, not a pill-shaped consumer app. */
    --r-sm: 2px;
    --r-md: 4px;
    --r-lg: 8px;
    --r-pill: 999px; /* status lozenges only */

    /* ------------------------------------------------------------ elevation
       A lamp glows; a panel does not float. Hence a glow token and one
       restrained shadow for genuinely raised cards on paper. */
    --glow-signal: var(--glow-brand);
    --glow-brand: 0 0 0 1px rgba(13, 115, 119, 0.45), 0 0 20px -4px rgba(13, 115, 119, 0.55);
    --glow-patch: 0 0 0 1px rgba(63, 176, 162, 0.45), 0 0 18px -6px rgba(63, 176, 162, 0.5);
    --shadow-panel: 0 14px 34px -26px rgba(20, 24, 28, 0.55);

    /* Layered rather than blurred: a hairline seam, a close contact shadow and
       one soft cast. Panels sit on the paper, they do not hover over it. */
    --shadow-card:
        0 1px 1px rgba(20, 24, 28, 0.04),
        0 2px 6px -2px rgba(20, 24, 28, 0.06),
        0 12px 28px -20px rgba(20, 24, 28, 0.35);
    --shadow-raised:
        0 1px 1px rgba(20, 24, 28, 0.05),
        0 4px 12px -4px rgba(20, 24, 28, 0.09),
        0 24px 48px -28px rgba(20, 24, 28, 0.45);

    /* ---------------------------------------------------------------- icon
       One stroke weight across the whole page — mixed weights are the single
       fastest way for an icon set to read as clip art. */
    --icon-size: 20px;
    --icon-stroke: 1.6;

    /* -------------------------------------------------------------- motion
       Short and mechanical: a relay closes, it does not ease gently. */
    --dur-instant: 90ms;
    --dur-fast: 160ms;
    --dur-base: 240ms;
    --ease-relay: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ------------------------------------------------------------- layout */
    --measure: 62ch; /* readable paragraph width */
    --container: 1180px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: 0ms;
        --dur-fast: 0ms;
        --dur-base: 0ms;
    }
}

/* ============================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--surface-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
}

:where(a) {
    color: inherit;
}

/* One focus treatment everywhere, on both grounds. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--c-signal-ink);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.on-inverse :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: var(--c-signal);
}

/* ============================================================================
   Typography
   ========================================================================== */

.t-display-xl,
.t-display-l,
.t-display-m {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-display);
    margin: 0;
    text-wrap: balance;
}

.t-display-xl {
    font-size: var(--t-display-xl);
}

.t-display-l {
    font-size: var(--t-display-l);
}

.t-display-m {
    font-size: var(--t-display-m);
    line-height: var(--lh-snug);
}

.t-heading {
    font-family: var(--font-display);
    font-size: var(--t-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    margin: 0;
}

.t-body-l {
    font-size: var(--t-body-l);
    line-height: var(--lh-relaxed);
    max-width: var(--measure);
    margin: 0;
}

.t-body {
    font-size: var(--t-body);
    max-width: var(--measure);
    margin: 0;
}

.t-body-s {
    font-size: var(--t-body-s);
    color: var(--text-secondary);
    margin: 0;
}

.t-caption {
    font-size: var(--t-caption);
    color: var(--text-secondary);
    margin: 0;
}

/* Engraved panel label. Used for eyebrows and field labels — never for prose. */
.t-label {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

/* Readout. The product's value is measured in seconds, so elapsed time and
   metrics get the mono face and tabular figures — numbers must not shift. */
.t-readout {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
}

/* --- text roles on the dark band ----------------------------------------- */
.on-inverse {
    color: var(--text-inverse);
}

.on-inverse .t-label,
.on-inverse .t-caption,
.on-inverse .t-body-s {
    color: var(--c-steel-dim);
}

/* ============================================================================
   Buttons
   ----------------------------------------------------------------------------
   Three intents only. `primary` carries a lamp that lights on hover — the one
   place the switchboard idea shows up in an interactive element.
   ========================================================================== */

.btn {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    /* type */
    font-family: var(--font-body);
    font-size: var(--t-body-s);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    /* box */
    padding: 0.8125rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-relay),
        border-color var(--dur-fast) var(--ease-relay),
        color var(--dur-fast) var(--ease-relay),
        box-shadow var(--dur-fast) var(--ease-relay),
        transform var(--dur-instant) var(--ease-relay);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
}

/* --- intent: primary -----------------------------------------------------
   The primary action carries the product's own teal, so the button and the mark
   in the header read as one brand. Amber stays what it always was: the colour of
   a live, unanswered line — a state rather than an identity. */
.btn--primary {
    background: var(--c-signal);
    color: #fff; /* white on brand teal — 5.6:1 */
    border-color: var(--c-signal);
}

.btn--primary:hover:not(:disabled) {
    box-shadow: var(--glow-signal);
}

.btn--primary:active:not(:disabled) {
    background: var(--c-signal-ink);
    border-color: var(--c-signal-ink);
    color: #fff;
    box-shadow: none;
}

/* The lamp: dim while idle, lit on hover/focus. */
.btn--primary .btn__lamp {
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.4);
    transition:
        background-color var(--dur-fast) var(--ease-relay),
        box-shadow var(--dur-fast) var(--ease-relay);
}

.btn--primary:hover:not(:disabled) .btn__lamp,
.btn--primary:focus-visible .btn__lamp {
    background: #fff;
    box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.55);
}

/* --- intent: secondary --------------------------------------------------- */
.btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn--secondary:hover:not(:disabled) {
    background: rgba(20, 24, 28, 0.05);
    border-color: var(--c-graphite);
}

.btn--secondary:active:not(:disabled) {
    background: rgba(20, 24, 28, 0.09);
}

/* --- intent: ghost ------------------------------------------------------- */
.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
    padding-inline: var(--sp-3);
}

.btn--ghost:hover:not(:disabled) {
    color: var(--text-primary);
    background: rgba(20, 24, 28, 0.05);
}

/* --- on the dark band ---------------------------------------------------- */
.on-inverse .btn--secondary {
    color: var(--text-inverse);
    border-color: var(--border-inverse);
}

.on-inverse .btn--secondary:hover:not(:disabled) {
    background: rgba(231, 233, 228, 0.08);
    border-color: var(--c-steel-dim);
}

.on-inverse .btn--ghost {
    color: var(--c-steel-dim);
}

.on-inverse .btn--ghost:hover:not(:disabled) {
    color: var(--text-inverse);
    background: rgba(231, 233, 228, 0.08);
}

/* --- sizes --------------------------------------------------------------- */
.btn--sm {
    padding: 0.5rem 0.875rem;
    font-size: var(--t-caption);
}

.btn--lg {
    padding: 1.0625rem 1.875rem;
    font-size: var(--t-body);
}

/* ============================================================================
   Status lozenge
   ----------------------------------------------------------------------------
   The product's two states, and the only place --r-pill is used: a line is
   either waiting (signal) or patched through to a person (patch).
   ========================================================================== */

.lozenge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.25rem 0.625rem;
    border-radius: var(--r-pill);
    border: 1px solid;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
}

.lozenge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: currentColor;
}

.lozenge--waiting {
    color: var(--c-signal-ink);
    border-color: rgba(13, 115, 119, 0.45);
    background: rgba(13, 115, 119, 0.1);
}

.lozenge--patched {
    color: var(--c-patch-ink);
    border-color: rgba(63, 176, 162, 0.45);
    background: rgba(63, 176, 162, 0.12);
}

.on-inverse .lozenge--waiting {
    color: var(--c-brand-lit);
    border-color: rgba(13, 115, 119, 0.35);
    background: rgba(13, 115, 119, 0.1);
}

.on-inverse .lozenge--patched {
    color: var(--c-patch);
    border-color: rgba(63, 176, 162, 0.35);
    background: rgba(63, 176, 162, 0.1);
}

/* ============================================================================
   Icons
   ----------------------------------------------------------------------------
   One monoline set, drawn on a 24 grid, stroked in currentColor at a single
   weight. Icons never carry colour of their own — they take it from the text
   they sit with, so a section can be recoloured without touching the set.
   ========================================================================== */

.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: none;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Icons are decorative next to a label; they never announce themselves. */
    pointer-events: none;
}

.icon--sm {
    --icon-size: 16px;
    --icon-stroke: 1.7;
}

.icon--lg {
    --icon-size: 24px;
    --icon-stroke: 1.5;
}

/* The chip an icon sits in when it heads a card: a recessed instrument well,
   not a coloured circle. */
.ichip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--border-hairline);
    border-radius: var(--r-md);
    background: var(--surface-lift);
    color: var(--text-primary);
}

.ichip--signal {
    color: var(--c-signal-ink);
    border-color: rgba(13, 115, 119, 0.35);
    background: rgba(13, 115, 119, 0.09);
}

.ichip--patch {
    color: var(--c-patch-ink);
    border-color: rgba(63, 176, 162, 0.35);
    background: rgba(63, 176, 162, 0.1);
}

.on-inverse .ichip {
    color: var(--text-inverse);
    border-color: var(--border-inverse);
    background: rgba(231, 233, 228, 0.06);
}