/* ═══════════════════════════════════════════════════════════════════════════
   SilverClean — shared design tokens
   ───────────────────────────────────────────────────────────────────────────
   One palette for every server-rendered surface: admin dashboard, worker
   dashboard, client portal, login, password change, and the error pages.

   Before this file, each of the ten templates carried its own inline <style>
   with its own hard-coded hexes — the admin dashboard alone had 358 colour
   literals and ran burnt orange, while the worker portal ran green and the
   client portal ran violet. A manager, a cleaner and a customer each saw what
   looked like a different product.

   The palette matches marketing/styles.css so the site that sells SilverClean
   and the software itself are recognisably one thing.

   RULE: semantic colours (ok / warn / danger / info) are deliberately separate
   from --brand. A status pill means the same thing regardless of branding, so
   re-skinning must never silently change what a badge communicates.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────
     Deep teal reads as the marketing site's cyan on a light ground while
     still passing contrast for text; the bright cyan is reserved for dark
     surfaces where it has room to glow. */
  --brand:         #0e7490;
  --brand-strong:  #0b5c73;   /* hover / pressed */
  --brand-lit:     #22d3ee;   /* accents on dark grounds only */
  --brand-wash:    #ecfeff;   /* active nav, tinted rows */
  --brand-wash-2:  #d7f5fb;   /* hover on a washed surface */
  --brand-line:    #b6e6f0;   /* borders on washed surfaces */

  /* ── Ink & ground ──────────────────────────────────────────────────── */
  --ink:           #0b1220;   /* headings */
  --ink-2:         #334155;   /* body */
  --ink-3:         #64748b;   /* labels, secondary */
  --ink-4:         #94a3b8;   /* placeholders, tertiary */
  --ground:        #f1f5f9;   /* page background */
  --surface:       #ffffff;   /* cards, panels, modals */
  --surface-2:     #f8fafc;   /* subtle fills, table heads, hover rows */
  --line:          #e2e8f0;   /* hairlines */
  --line-2:        #cbd5e1;   /* input borders */

  /* ── Dark header band ──────────────────────────────────────────────── */
  --header-from:   #0b1220;
  --header-to:     #0e2438;
  --on-dark:       #f2f6fc;
  --on-dark-2:     rgba(226,236,247,.72);

  /* ── Semantic — independent of brand ───────────────────────────────── */
  --ok:            #059669;
  --ok-wash:       #d1fae5;
  --ok-ink:        #065f46;
  --warn:          #d97706;
  --warn-wash:     #fef3c7;
  --warn-ink:      #92400e;
  --danger:        #dc2626;
  --danger-wash:   #fee2e2;
  --danger-ink:    #991b1b;
  --info:          #2563eb;
  --info-wash:     #dbeafe;
  --info-ink:      #1e40af;

  /* ── Elevation ─────────────────────────────────────────────────────────
     Flat by default. Shadows indicate layering (modals, popovers), not
     importance — a page where every card floats has no hierarchy at all. */
  --sh-1: 0 1px 2px rgba(11,18,32,.05);
  --sh-2: 0 1px 3px rgba(11,18,32,.07), 0 4px 12px rgba(11,18,32,.05);
  --sh-3: 0 4px 12px rgba(11,18,32,.10), 0 12px 32px rgba(11,18,32,.08);

  /* ── Radius & type ─────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Liberation Mono', monospace;

  /* ── Easing ────────────────────────────────────────────────────────────
     Two curves, borrowed from the marketing stylesheet, used everywhere.
     Consistency is what reads as "designed"; a page where every transition
     picks the browser default `ease` reads as assembled. The dashboard had
     17 transitions at 0.2s and not one named curve.

     --ease-out decelerates hard: fast departure, long settle. It suits
     things ARRIVING (a panel opening, a toast sliding in).
     --ease is gentler and suits state changes on something already on
     screen (hover, active, colour shifts). */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ── Type scale ────────────────────────────────────────────────────────
     A real ratio rather than a size chosen locally per heading. Sizes relate
     to each other, which is most of what makes a layout look considered.

     Deliberately flatter than the marketing site's scale: that page opens on
     a 104px display because it has one message to land. A dashboard is
     scanned, not read — an oversized heading there just costs rows of data.
     Same discipline, different amplitude. */
  --t-page:    1.6rem;    /* page title: "Home", "Invoicing" */
  --t-section: 1.15rem;   /* card headings */
  --t-body:    0.95rem;
  --t-sm:      0.85rem;   /* secondary text, table cells */
  --t-xs:      0.75rem;   /* labels, captions, badges */

  /* Long lines are unreadable and look unconsidered. Applies to prose, never
     to tables. */
  --measure: 68ch;
}

/* ── Shared primitives ───────────────────────────────────────────────────
   Small enough to stay out of the way of each template's own layout rules,
   but enough that a login page and an error page agree on what a button and
   a card look like without either restating it. */

.sc-auth-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  padding: 24px;
}

.sc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 2.25rem;
  width: 100%;
  max-width: 420px;
}

.sc-title {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.015em;
  margin: 0 0 .4rem;
}

.sc-sub {
  font-size: .9rem;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0;
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  padding: .7rem 1.4rem;
  font: 600 .95rem var(--font);
  cursor: pointer;
  transition: background .18s ease;
}
.sc-btn:hover  { background: var(--brand-strong); }
.sc-btn:disabled { opacity: .55; cursor: not-allowed; }

.sc-field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-2);
}
.sc-field input,
.sc-field select,
.sc-field textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: 400 .95rem var(--font);
  color: var(--ink);
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent);
}

/* Status pills — one vocabulary everywhere. */
.sc-pill {
  display: inline-block;
  padding: .22rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
}
.sc-pill-ok      { background: var(--ok-wash);     color: var(--ok-ink); }
.sc-pill-warn    { background: var(--warn-wash);   color: var(--warn-ink); }
.sc-pill-danger  { background: var(--danger-wash); color: var(--danger-ink); }
.sc-pill-info    { background: var(--info-wash);   color: var(--info-ink); }
.sc-pill-neutral { background: var(--surface-2);   color: var(--ink-3); }

/* Numbers that sit in columns must line up digit-for-digit. */
.sc-num { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BORROWED FROM THE MARKETING STYLESHEET
   ───────────────────────────────────────────────────────────────────────────
   Three ideas that earn their place in a work tool. Everything else on that
   page — liquid glass, chromatic aberration, scroll-driven reveals, the
   cursor-tracked specular light — is deliberately NOT here. A marketing page
   is looked at once and needs to impress; a dashboard is operated for eight
   hours and needs to disappear. Motion that delights on first view becomes
   friction on the four-hundredth.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Mono for anything that represents data ─────────────────────────────
   The marketing stylesheet argues this and the dashboard needs it more:
   field-service software is a record system, and numerals set in a UI face
   read as decorative where in mono they read as evidence. Timestamps, hours,
   money and counts are the entire content of this product.

   tabular-nums is the functional half: proportional digits make a column of
   times visibly ragged because 1 is narrower than 8. */
.mono,
.sc-num,
td.num, th.num,
time, .time, .hours, .amount, .money, .count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 2. Uppercase mono labels ──────────────────────────────────────────────
   Used on the marketing site for eyebrows and section kickers. In a dashboard
   it separates a FIELD LABEL from the value beneath it without needing a
   heavier weight or a rule. */
.label-mono {
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── 3. Named easing on interactive surfaces ───────────────────────────────
   Applied narrowly — to things the user acts on, not to everything. */
.sc-btn,
button, .btn,
input, select, textarea,
.tab-btn, a {
  transition-timing-function: var(--ease);
}

/* Focus ring: one treatment across every surface, including keyboard access
   to table rows and tab buttons. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Prose gets a measure cap; tables and grids never do. */
.prose, .lede, .hint, .form-help {
  max-width: var(--measure);
}