/**
 * LayCor brand tokens + primitives.
 *
 * The idea is a work docket. This is software for inspectors in crawlspaces,
 * dispatchers at six in the morning and drivers with a weigh ticket on the
 * dash — so it is drawn like an instrument and a printed job sheet, not like
 * a consumer app. Ruled panels, near-square corners, hairlines you can
 * actually see, and figures set in a mono so a column of tonnages or invoice
 * totals lines up and can be read wrong-side-up in bad light.
 *
 * Colour is read off the logo: navy ink for type and the mark's outer L, a
 * teal-to-lime gradient for the C and the swoosh. The gradient is a signature,
 * not a finish — it appears on the mark and on the active nav rail and
 * nowhere else. Buttons take flat green, because a gradient on every action
 * is how a brand stops meaning anything.
 *
 * Loaded by the signup shell and the V2 app layout.
 */

:root {
    /* Brand */
    --lc-navy:      #16273c;   /* logo navy — headings, mark */
    --lc-navy-deep: #0e1b2b;
    --lc-teal:      #0f8a6a;   /* gradient start — the C's left edge */
    --lc-green:     #17a34a;   /* primary flat green */
    --lc-green-d:   #12833c;
    --lc-lime:      #8cc63f;   /* gradient end — the swoosh tip */
    --lc-grad:      linear-gradient(100deg, var(--lc-teal) 0%, var(--lc-green) 45%, var(--lc-lime) 100%);

    /* Surfaces. The ground is a cool neutral pulled toward the navy rather
       than a default grey — chosen, not inherited. Rules are deliberately
       darker than the usual near-invisible hairline: this is a ruled sheet,
       and structure you have to squint for is not structure. */
    --lc-bg:        #e9edf1;
    --lc-surface:   #ffffff;
    --lc-surface-2: #f0f3f6;
    --lc-surface-3: #e2e8ee;
    --lc-ink:       var(--lc-navy);
    --lc-ink-2:     #2c4157;
    --lc-muted:     #5b6a7d;
    --lc-faint:     #8d9bab;
    --lc-line:      rgba(22, 39, 60, .14);
    --lc-line-2:    rgba(22, 39, 60, .26);

    /* Status */
    --lc-ok:        #0f7a3d;  --lc-ok-bg:     #eaf7ee;
    --lc-warn:      #a4630a;  --lc-warn-bg:   #fdf5e6;
    --lc-danger:    #b42318;  --lc-danger-bg: #fdf1f0;
    --lc-info:      #0f6f8a;  --lc-info-bg:   #e8f4f8;

    /* Type. Archivo is a grotesque drawn from nineteenth-century American
       signage and industrial printing — this product's own world, and a face
       with enough character to be recognisable at a glance. Plex Mono carries
       every figure: container numbers, tonnages, money, dates. That is
       function rather than styling, because those are read in columns and
       compared, and a proportional 1 next to a proportional 7 is a mis-read
       waiting to happen. */
    --lc-font:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lc-display:   'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
    --lc-mono:      'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Shape. Near-square. Softly rounded everything is the single loudest
       tell of a generic UI kit, and a tool should look machined. */
    --lc-radius:    4px;
    --lc-radius-lg: 6px;
    --lc-radius-xl: 8px;
    --lc-radius-sm: 3px;

    /* Elevation, spent sparingly. A panel is ruled, not floated: it earns its
       edge from a border. Shadow is reserved for things that genuinely sit
       above the page — a menu, a dialog, a bar pinned over content. Making
       everything hover is why generic dashboards read as weightless. */
    --lc-shadow-xs: none;
    --lc-shadow:    none;
    --lc-shadow-md: 0 2px 4px rgba(22, 39, 60, .05), 0 8px 20px rgba(22, 39, 60, .07);
    --lc-shadow-lg: 0 4px 8px rgba(22, 39, 60, .06), 0 20px 48px rgba(22, 39, 60, .12);
    --lc-ring:      0 0 0 3px rgba(23, 163, 74, .22);
}

/**
 * Dark theme. Only the tokens are redefined — every component styles through
 * them, so nothing below needs a dark-specific rule.
 *
 * Opt-in via data-theme on the root rather than prefers-color-scheme: this is
 * an application someone works in all day, and the choice belongs to them, not
 * to whatever their OS happens to be set to.
 *
 * The greens are lifted and desaturated for the dark ground. The light-mode
 * green on navy is muddy and fails contrast at small sizes.
 */
:root[data-theme="dark"] {
    --lc-green:     #34c46a;
    --lc-green-d:   #5ad684;
    --lc-teal:      #2ba98a;
    --lc-lime:      #a4d95f;
    --lc-grad:      linear-gradient(100deg, #1c8f70 0%, #22a35a 45%, #7cb83a 100%);

    --lc-bg:        #0b1620;
    --lc-surface:   #121f2b;
    --lc-surface-2: #1a2a38;
    --lc-surface-3: #223245;
    --lc-ink:       #e8eef2;
    --lc-ink-2:     #c2d0da;
    --lc-muted:     #93a5b3;
    --lc-faint:     #6d8090;
    --lc-line:      rgba(255, 255, 255, .13);
    --lc-line-2:    rgba(255, 255, 255, .24);

    --lc-ok:        #4ade80;  --lc-ok-bg:     rgba(52, 196, 106, .13);
    --lc-warn:      #fbbf5a;  --lc-warn-bg:   rgba(251, 191, 90, .13);
    --lc-danger:    #f87171;  --lc-danger-bg: rgba(248, 113, 113, .13);
    --lc-info:      #56b8d4;  --lc-info-bg:   rgba(86, 184, 212, .13);

    --lc-shadow-xs: none;
    --lc-shadow:    none;
    --lc-shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .4);
    --lc-shadow-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 20px 48px rgba(0, 0, 0, .55);
    --lc-ring:      0 0 0 3px rgba(52, 196, 106, .28);
}

/* The navy logo disappears on a dark ground; lift it to near-white. */
:root[data-theme="dark"] .lc-logo-img { filter: brightness(0) invert(1) opacity(.92); }

* { box-sizing: border-box; }

/* ---- Logo ---------------------------------------------------------- */

.lc-logo { display: inline-flex; align-items: center; text-decoration: none; }
.lc-logo-img { height: 30px; width: auto; display: block; }
.lc-logo-fallback {
    font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--lc-navy);
}

/* ---- Buttons ------------------------------------------------------- */

.lc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--lc-radius); border: 1px solid transparent;
    font: inherit; font-weight: 600; font-size: 14px; line-height: 1;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.lc-btn:focus-visible { outline: none; box-shadow: var(--lc-ring); }

/* Flat, not gradient. The gradient belongs to the mark; spending it on every
   button is how a signature becomes wallpaper. */
.lc-btn-primary { background: var(--lc-green); color: #fff; }
.lc-btn-primary:hover { background: var(--lc-green-d); }

.lc-btn-ghost { background: transparent; color: var(--lc-muted); border-color: var(--lc-line-2); }
.lc-btn-ghost:hover { color: var(--lc-ink); border-color: var(--lc-ink); }

.lc-btn-lg { padding: 14px 26px; font-size: 15px; border-radius: var(--lc-radius); }
.lc-btn[disabled], .lc-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---- Cards --------------------------------------------------------- */

/* A panel, not a floating card: it earns its edge from a rule. */
.lc-card {
    background: var(--lc-surface); border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius-lg);
}

/* ---- Form fields --------------------------------------------------- */

.lc-field { display: block; margin-bottom: 18px; }
.lc-field > span {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--lc-ink); margin-bottom: 6px;
}
.lc-field input, .lc-field select, .lc-field textarea {
    width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
    color: var(--lc-ink); background: var(--lc-surface);
    border: 1px solid var(--lc-line-2); border-radius: var(--lc-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lc-field input:focus, .lc-field select:focus, .lc-field textarea:focus {
    outline: none; border-color: var(--lc-green); box-shadow: var(--lc-ring);
}
.lc-field .lc-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--lc-muted); font-weight: 400; }
.lc-field .lc-err  { display: block; margin-top: 6px; font-size: 12.5px; color: var(--lc-danger); font-weight: 500; }
.lc-field.has-error input { border-color: var(--lc-danger); }

/* ---- Bits ---------------------------------------------------------- */

/* Square-shouldered, like a stamp on a docket, rather than the pill every
   component library ships. */
.lc-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: var(--lc-radius-sm);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--lc-surface-2); color: var(--lc-muted);
}
.lc-pill-brand { background: var(--lc-ok-bg); color: var(--lc-ok); }

.lc-muted { color: var(--lc-muted); }

/* ---- Typography ---------------------------------------------------- */

/* Headings are set tight and a touch heavy — Archivo has the width to carry
   it, and a job sheet's title is a label, not a flourish. */
.lc-display, h1, h2, h3 { font-family: var(--lc-display); font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 17px; }

/* Every figure. Tabular by construction, so a column of tonnages, container
   numbers or invoice totals lines up down the page. */
.lc-num, .lc-mono {
    font-family: var(--lc-mono); font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; font-weight: 500;
}

/* The small stamped label that titles a section or a stat. Wide tracking is
   what makes it read as printed rather than shrunk. */
.lc-eyebrow {
    font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--lc-faint);
}

/* ---- Avatar -------------------------------------------------------- */

/* Square with a clipped corner, not a circle: it reads as an ID plate rather
   than a social avatar, which is what it is. */
.lc-avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 32px; height: 32px; border-radius: var(--lc-radius-sm);
    background: var(--lc-navy); color: #fff;
    font-family: var(--lc-mono); font-size: 12px; font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase; user-select: none;
}
.lc-avatar-sm { width: 26px; height: 26px; font-size: 11px; }