/* ============================================================================
   AutoPal Client Portal — DESIGN TOKENS (Ink & Brass)
   ----------------------------------------------------------------------------
   The ONLY file in this build allowed to contain literal color values.
   Re-skinning the portal = editing this file. Logic and layout never
   reference a hex directly; portal.css derives alpha tints with color-mix()
   from these tokens.
   ========================================================================== */

:root {
  /* ---- Brand core -------------------------------------------------------- */
  --ink:          #121316;  /* warm ink — darkest ground */
  --bone:         #F4F1EA;  /* bone — light ground */
  --petrol:       #11303A;  /* petrol — dark field (login) */
  --petrol-deep:  #0E2830;  /* petrol, deepened (brand panel) */
  --brass:        #B6883C;  /* brass — active state, key number, primary CTA */
  --brass-bright: #C9A24B;  /* brass, brightened — focus/active on dark */
  --brass-deep:   #8A6526;  /* brass, deepened — small text on light */
  --green:        #3F7D5B;  /* signal — approved / $0 / verified */
  --warn:         #855A18;  /* warn — action needed / error (never brass) */

  /* ---- Surfaces ---------------------------------------------------------- */
  --surface:        #FFFFFF; /* cards on light */
  --surface-alt:    #FAF8F3; /* nested panels / rows */
  --surface-dim:    #F0ECE3; /* locked / de-emphasized panels */
  --surface-dark:   #171A1F; /* dark card (auth card, pre-tax cell) */
  --skeleton:       #DED9CE; /* skeleton base */
  --skeleton-hi:    #EDE9E0; /* skeleton highlight + neutral chip bg */

  /* ---- Lines ------------------------------------------------------------- */
  --line:        #E0DACE;   /* card borders on light */
  --line-strong: #C4BFB3;   /* dashed drop zones, upcoming stage rings */
  --line-dim:    #D2CCBF;   /* neutral chip borders, dashed locked panels */

  /* ---- Text on light ----------------------------------------------------- */
  --text:       #22201C;    /* display headings */
  --text-body:  #3A382F;    /* primary UI text */
  --text-mute:  #6B6960;    /* secondary */
  --text-faint: #8A867D;    /* metadata / mono labels */
  --text-ghost: #A6A196;    /* upcoming / disabled */

  /* ---- Text & accents on dark -------------------------------------------- */
  --on-dark:        var(--bone);
  --on-brass:       #14100A;  /* text sitting on a brass fill */
  --warn-on-dark:   #E7CBA0;  /* warn text on petrol/ink */

  /* ---- Type roles --------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Scale -------------------------------------------------------------- */
  --radius-card:  12px;
  --radius-row:   10px;
  --radius-field: 9px;
  --radius-btn:   10px;
  --radius-chip:  20px;
  --tap-min:      44px;      /* a11y minimum tap target */

  /* ---- Focus -------------------------------------------------------------- */
  /* 3px brass halo (wireframe F2). Applied via box-shadow so it follows radii. */
  --focus-halo: 0 0 0 3px color-mix(in srgb, var(--brass-bright) 40%, transparent);

  /* ---- Elevation ---------------------------------------------------------- */
  --shadow-card: 0 14px 34px color-mix(in srgb, var(--ink) 14%, transparent);
}