/*
 * nailinit OS — the design system, in one place.
 *
 * Every page used to carry its own copy of the @font-face block and its own
 * :root palette. Twelve copies, and they had already drifted: the token sets
 * ranged from 4 names to 20, vendor-portal's --warn was #B45309 while the five
 * app pages agreed on #A6691C, and ceo.html and dashboard.html — two dark
 * dashboards meant to look like siblings — disagreed on green, red AND amber.
 * Nothing was wrong enough to notice on any single page, which is exactly how
 * a design system dies.
 *
 * Load this first, before a page's own <style>. Everything here is either a
 * token or a primitive shared by more than one page; anything used on exactly
 * one page stays on that page.
 *
 * A page that legitimately differs overrides ONE line and says why (the public
 * surfaces sit on --bg-subtle rather than white, for instance). That is a
 * design decision. Twelve independent palettes is not.
 *
 * Served from /brand.css and exempt from the auth gate, because the login,
 * vendor and investor pages are seen by people who have no session yet — the
 * same reason /fonts/ is exempt. It carries no data.
 */

/* ── Typeface ──────────────────────────────────────────────────────────────
   Self-hosted, no CDN at runtime. Absolute paths so the file resolves the
   same whether it is pulled from /login.html or /vendor-register. */
@font-face { font-family:'Clash Display'; src:url('/fonts/clash-display-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/fonts/clash-display-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/fonts/clash-display-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/fonts/clash-display-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/fonts/satoshi-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/fonts/satoshi-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/fonts/satoshi-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Palette — the light surface every app and public page sits on ───────── */
:root {
  --font:          'Satoshi', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:  'Clash Display', 'Satoshi', ui-sans-serif, sans-serif;
  /* Referenced once as var(--font-mono, monospace) and never defined — the
     inline fallback meant it degraded quietly rather than breaking, which is
     why it survived. Codes, SKUs and ledger figures want a real mono face. */
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg:            #FFFFFF;
  --bg-subtle:     #FAFAF8;   /* the app off-white — prefer this over the #FAFAFA/#FAF9F7/#FBFBFA variants that had crept in */
  --surface:       #FFFFFF;
  --surface-hover: #F7F7F5;

  --border:        #EBEBEA;
  --border-strong: #D9D9D7;
  --grid:          #F1F1EF;

  --text:          #1A1A18;
  --text-muted:    #9B9A97;
  --text-subtle:   #787774;

  /* The mark itself. Near-black rather than a hue: the brand is monochrome and
     colour is reserved for state, which is what makes state legible. */
  --accent:        #18181B;

  /* State. Each pairs a foreground with the tint it sits on. */
  --live:          #0F7B0F;  --live-soft:   #EDF7ED;
  --warn:          #A6691C;  --warn-soft:   #FFF7E6;
  --danger:        #9B2727;  --danger-soft: #FCEDED;

  /* Violet. The one hue in the system that is not state and not the mark.
   *
   * It appeared 212 times in Nia.html with nothing naming it, plus a --brand
   * alias on two satellite pages — a whole sub-palette living as loose hex.
   * It is named by HUE rather than by meaning on purpose: it marks AI drafts,
   * the calendar's today, revenue pulse, timers, the COS surfaces and the
   * investor pages, which share no concept between them. Calling it --ai or
   * --brand would be a claim the code does not support, and --brand is
   * actively wrong here: the brand mark is --accent, near-black.
   *
   * Four levels because four distinct jobs already existed in the markup,
   * each taking the value that was already dominant for that job — so naming
   * them changed nothing on screen.
   */
  --violet:        #7C3AED;   /* the hue itself: icons, text, borders */
  --violet-strong: #5B21B6;   /* text sitting ON --violet-soft */
  --violet-soft:   #EDE9FE;   /* chip and badge fill */
  --violet-wash:   #F5F3FF;   /* the lightest tint — row hover, today's cell */

  /* Motion. Fast out, gentle settle. */
  --nia-ease:      cubic-bezier(.22,.61,.36,1);
  --nia-dur:       220ms;
  --nia-dur-fast:  140ms;

  /* Button shape, as ONE number.
     The radius had been written out by hand in ~370 places — 40-odd .*-btn
     rules plus 331 inline styles on <button> — all saying 8px, so changing
     the shape meant changing every one of them and any that got missed became
     the odd button out. It is a token now: this line is the platform's button
     shape, and the call sites reference it.
     4px, not 8px: curved, not rounded. On a taller button 8px reads as a pill,
     which is a different, softer voice than these buttons want. */
  --btn-radius:    4px;
}

/* ── Dark surface — the two big-screen dashboards (ceo, dashboard) ─────────
   Opt in with <body data-surface="dark">. These are read across a room, so the
   state colours are the lighter variants: #22C55E / #EF4444 / #F59E0B are the
   standard mid-tones and go muddy against #0B0B0D at distance. ceo.html used
   those and dashboard.html used the lighter set; both now use the lighter set,
   which is the one that actually survives the viewing conditions. */
[data-surface="dark"] {
  --bg:            #0B0B0D;
  --bg-subtle:     #111114;
  --surface:       #111114;
  --surface-hover: #1B1B20;

  --border:        #232327;
  --border-strong: #303036;
  --grid:          #1B1B20;

  --text:          #F5F5F7;
  --text-muted:    #8A8A94;
  --text-subtle:   #6A6A74;

  --accent:        #F5F5F7;

  --green:         #34D399;
  --red:           #F87171;
  --amber:         #FBBF24;

  --live:          #34D399;  --live-soft:   #10241C;
  --warn:          #FBBF24;  --warn-soft:   #241D0E;
  --danger:        #F87171;  --danger-soft: #2A1414;
}

/* ── Reset ────────────────────────────────────────────────────────────────
   Byte-for-byte what all eleven pages already opened with (three whitespace
   variants of the same rule), so deleting their copies changes nothing. The
   universal margin/padding zeroing is load-bearing — every page's layout
   assumes headings and paragraphs have no default margin. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────────
   These lived only in Nia.html, so every satellite page hand-rolled its own
   button and each one landed on slightly different padding and radius. Shared
   now, so a page can use the class instead of inventing the look again.

   Shape and size both come from here now. The buttons had been sized for a
   dense admin table and were being used as page-level primary actions, where
   12px/7px read as small and the 8px radius read as a pill. Bigger, and
   curved rather than rounded — see --btn-radius. */
button.btn, .btn {
  background: var(--text); color: #fff; border: none;
  padding: 9px 18px; border-radius: var(--btn-radius);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
button.btn:hover, .btn:hover { background: #000; }

button.btn-ghost, .btn-ghost {
  background: transparent; color: var(--text); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: var(--btn-radius);
  font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer;
}
button.btn-ghost:hover, .btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); }
button.btn-ghost.active, .btn-ghost.active { background: var(--text); color: #fff; border-color: var(--text); }

/* Small is still small — it sits in table rows — but it moved up with the
   rest, because a row action that reads two sizes below the page's primary
   action stops looking like the same button family. */
button.btn-sm, .btn-sm { padding: 6px 13px; font-size: 12px; border-radius: var(--btn-radius); }

/* Two more shapes, and they were NOT designed — they were measured.
 *
 * Nia.html carries ~850 inline-styled buttons across 555 distinct signatures,
 * and only 11 of them are the solid dark shape .btn describes. Forcing the
 * rest into .btn would be a redesign. Instead these two are the modal cluster
 * of the two largest archetypes, with layout-incidental properties (margin,
 * flex, width) stripped out so they generalise.
 *
 * Each carries ONLY what its adopters already declared identically, so
 * adopting is rendering-identical: the class supplies exactly the
 * declarations that were removed from the element, and anything a button
 * still declares inline continues to win over the class.
 *
 * Deliberately no :hover. Some adopters drive their own hover through inline
 * onmouseover handlers, and a CSS hover here would fight them. Hover belongs
 * in a later pass that retires those handlers first.
 */

/* The bare glyph button — a ✕, a ⋯, a chevron. No chrome, just a hit target. */
button.btn-icon, .btn-icon {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
}
/* Hover now lives here rather than in an inline onmouseover on each element.
   Taken from what the icon buttons that DID have a hover already did:
   muted → full-strength text. */
button.btn-icon:hover, .btn-icon:hover { color: var(--text); }

/* The secondary action: white plate, hairline border, 8px radius. The most
   common button in the app after the primary one. */
button.btn-outline, .btn-outline {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; font-family: inherit;
}
/* Same hover as .btn-ghost, which is the same control on a transparent plate.
   Two sibling secondary buttons behaving differently on hover is the drift
   this file exists to stop. */
button.btn-outline:hover, .btn-outline:hover {
  background: var(--surface-hover); border-color: var(--border-strong);
}

/* Row hover for the list surfaces. Six of these carried an inline handler
   painting #f9f9f8 and restoring to nothing; that is --surface-hover to
   within two parts in 255, and it is a row highlight, not a brand colour. */
.list-item:hover { background: var(--surface-hover); }

button:not(:disabled):active, .btn:not(:disabled):active { transform: translateY(.5px); }
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }

/* Keyboard focus was invisible on most of these surfaces — a real problem for
   anyone not using a mouse, and one no page solved on its own. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}