/* Paragon Wheel & Tire — design tokens
   Storefront is dark-first (carbon + chrome). Admin uses the .theme-admin light set.
   Fonts are self-hosted from /assets/fonts (Saira variable, Barlow) — see fonts.css. */

:root {
  color-scheme: dark;

  /* Neutrals — slight cool bias, taken from the logo's carbon backdrop */
  --carbon:   #0b0b0c;   /* page */
  --graphite: #15171a;   /* surfaces */
  --gunmetal: #23262b;   /* raised surfaces, borders */
  --line:     #2e3238;   /* hairlines */
  --steel:    #8b9097;   /* muted text */
  --alloy:    #c5c8cd;   /* secondary text */
  --chrome:   #f1f2f4;   /* primary text */

  /* Accent — Paragon Gold: CTAs, links, focus (approved Oct 27, 2026) */
  --accent:     #e0a43a;
  --accent-hi:  #f0bd5e;
  --accent-ink: #1a1204;

  /* Semantic */
  --ok:   #3fb97a;
  --warn: #f0783c;  /* orange, kept distinct from gold */
  --crit: #e5534b;

  /* Chrome treatments */
  --chrome-grad: linear-gradient(180deg, #ffffff 0%, #e3e5e8 36%, #90949a 50%, #eef0f2 58%, #b8bbc0 82%, #d9dbde 100%);
  --chrome-edge: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.06) 45%, rgba(255,255,255,.18));

  /* Type */
  --font-display: "Saira", "Eurostile", "Arial Black", system-ui, sans-serif;  /* use font-stretch: 125% */
  --font-body:    "Barlow", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-data:    "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.1rem + .45vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 1.95rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4.2rem);

  /* Shape — chamfered corners echo the logo's cut angles */
  --cut-s: 6px;
  --cut-m: 12px;
  --cut-l: 20px;
  --radius: 3px;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;  --space-7: 3rem;   --space-8: 4.5rem;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Admin — light, dense, utilitarian */
.theme-admin {
  color-scheme: light;
  --a-bg: #f3f4f6; --a-surface: #ffffff; --a-line: #dde0e4;
  --a-ink: #16181b; --a-muted: #5f656d; --a-accent: #e0a43a; --a-accent-ink: #1a1204;
}