/* ============================================================
   FEDERAL AUTO PEÇAS — Design Tokens
   colors_and_type.css
   ============================================================
   Visual DNA: brushed gold (FA monogram) + silver/steel (FEDERAL
   wordmark) on deep onyx. Industrial-condensed display, mechanical
   sharp corners, hairline gold rules. Premium automotive aftermarket.
   ============================================================ */

/* ---------- Webfonts (Google Fonts substitutions) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800;900&family=Saira:wght@300;400;500;600;700&family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============ COLOR — RAW PALETTE ============ */

  /* Gold / Brass (the FA monogram) — warm, slightly desaturated bronze */
  --gold-50:  #FBF5E6;
  --gold-100: #F2E2B6;
  --gold-200: #E5C988;
  --gold-300: #D4AC5F;
  --gold-400: #C49544;
  --gold-500: #B5832F;   /* primary brand gold */
  --gold-600: #9A6E25;
  --gold-700: #7A571C;
  --gold-800: #5A3F14;
  --gold-900: #3A290D;

  /* Steel / Lead — cool brushed silver, leaning darker.
     Reads as "industrial precision instrument" not "chrome trim". */
  --steel-50:  #EDEEF1;
  --steel-100: #D6D8DC;
  --steel-200: #B4B7BD;
  --steel-300: #91959C;   /* upper-bound — never goes lighter in normal UI */
  --steel-400: #6F7278;
  --steel-500: #565961;   /* default body-on-dark muted */
  --steel-600: #3F4248;
  --steel-700: #2C2E33;
  --steel-800: #1E2025;
  --steel-900: #131419;

  /* Onyx / Carbon — backgrounds */
  --onyx-base:    #0B0B0E;   /* near-black hero / page */
  --onyx-card:    #14141A;   /* default card */
  --onyx-raised:  #1C1D24;   /* elevated card */
  --onyx-line:    #25262E;   /* hairline divider */
  --onyx-input:   #0E0E13;   /* darker input wells */

  /* Ivory — light-mode neutrals */
  --ivory-base:   #F7F4EC;   /* warm off-white page */
  --ivory-card:   #FFFFFF;
  --ivory-line:   #E6E1D3;
  --ivory-ink:    #1A1A20;

  /* Semantic accents (kept restrained — automotive context uses
     red sparingly for stop/error, green for in-stock/confirm) */
  --signal-red:    #D9342B;   /* error / out of stock / brake */
  --signal-amber:  #E8A22B;   /* warning / low stock */
  --signal-green:  #2E8B57;   /* in stock / confirmed */
  --signal-blue:   #2F6FB5;   /* informational / link */

  /* ============ SEMANTIC COLOR (default = dark theme) ============ */

  --bg:           var(--onyx-base);
  --bg-card:      var(--onyx-card);
  --bg-raised:    var(--onyx-raised);
  --bg-input:     var(--onyx-input);

  --fg:           #F1ECDF;             /* warm bone, not pure white */
  --fg-muted:     #B4B7BD;   /* keep readable on dark; matches new steel-200 */
  --fg-subtle:    var(--steel-400);
  --fg-on-gold:   #1A1308;             /* near-black for gold buttons */

  --border:       var(--onyx-line);
  --border-strong:#33353F;
  --rule-gold:    var(--gold-600);     /* hairline gold separator */

  --accent:       var(--gold-500);     /* primary action */
  --accent-hover: var(--gold-400);
  --accent-press: var(--gold-600);

  --link:         var(--gold-300);
  --link-hover:   var(--gold-200);

  /* Metallic gradients — the brand uses brushed metal heavily.
     These approximate the highlight roll on the logo. */
  --grad-gold:
    linear-gradient(180deg,
      #E8C374 0%,
      #C99A40 35%,
      #8E661E 65%,
      #B5832F 100%);
  --grad-gold-soft:
    linear-gradient(180deg, #D4AC5F 0%, #9A6E25 100%);
  --grad-steel:
    linear-gradient(180deg,
      #B4B7BD 0%,
      #7A7D84 38%,
      #3F4248 72%,
      #6F7278 100%);
  --grad-onyx:
    linear-gradient(180deg, #1C1D24 0%, #0B0B0E 100%);
  --grad-onyx-radial:
    radial-gradient(120% 80% at 50% 0%, #1F2028 0%, #0B0B0E 70%);

  /* ============ TYPE — FONT FAMILIES ============ */
  --font-display: 'Saira Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-tag:     'Saira', 'Inter', system-ui, sans-serif;
  --font-body:    'Sora', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* ============ TYPE — SIZE SCALE ============ */
  /* Mechanical, deliberate. No fractional rems. */
  --t-2xs:  11px;
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  48px;
  --t-4xl:  64px;
  --t-5xl:  88px;
  --t-6xl:  120px;

  /* ============ SPACING (4px base, mechanical) ============ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ============ RADII — sharp, mechanical ============ */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;     /* default — chip / input */
  --r-md:   6px;     /* card / button */
  --r-lg:   10px;    /* hero card */
  --r-xl:   16px;    /* modal */
  --r-pill: 999px;   /* used SPARINGLY (status chips only) */

  /* ============ BORDERS ============ */
  --bw-hair: 1px;
  --bw-rule: 2px;     /* the gold rule under "AUTO PEÇAS" */
  --bw-bold: 3px;

  /* ============ SHADOWS / ELEVATION ============ */
  /* Dark-theme: mostly inner-glow + hairline border. Outer shadows
     are deep and cool — like garage lighting. */
  --sh-1: 0 1px 0 0 rgba(255,255,255,0.04) inset,
          0 1px 2px rgba(0,0,0,0.5);
  --sh-2: 0 1px 0 0 rgba(255,255,255,0.05) inset,
          0 4px 12px rgba(0,0,0,0.55);
  --sh-3: 0 1px 0 0 rgba(255,255,255,0.06) inset,
          0 12px 28px rgba(0,0,0,0.65);
  --sh-gold-glow: 0 0 0 1px var(--gold-700),
                  0 4px 18px rgba(181,131,47,0.25);
  --sh-gold-press: 0 0 0 1px var(--gold-800),
                   0 1px 0 rgba(0,0,0,0.4) inset;

  /* ============ MOTION ============ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;   /* hover */
  --dur-2: 200ms;   /* default */
  --dur-3: 320ms;   /* enter / exit */
  --dur-4: 520ms;   /* hero reveal */
}

/* =============== LIGHT THEME (rare; storefront receipts, print) =============== */
[data-theme="light"] {
  --bg:        var(--ivory-base);
  --bg-card:   var(--ivory-card);
  --bg-raised: #FFFFFF;
  --bg-input:  #FFFFFF;
  --fg:        var(--ivory-ink);
  --fg-muted:  #4A4A55;
  --fg-subtle: #7A7A85;
  --border:    var(--ivory-line);
  --border-strong: #C9C2B0;
  --rule-gold: var(--gold-500);
  --link:      var(--gold-700);
  --link-hover:var(--gold-800);
}

/* ============ SEMANTIC TYPE STYLES ============ */
/* Use these like utility classes OR copy the rules into your
   own selectors. They map intent → display tokens. */

.t-eyebrow,
[data-type="eyebrow"] {
  /* "AUTO PEÇAS" treatment — wide-tracked tagline */
  font-family: var(--font-tag);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-4xl);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  line-height: 1.0;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg);
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fg);
}

.t-h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.t-h5, h5 {
  font-family: var(--font-tag);
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--fg-muted);
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--fg);
}

.t-small {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-tag);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

.t-sku {
  /* Part numbers / SKUs — always mono, all-caps, slight tracking */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.t-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  letter-spacing: -0.005em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.t-price-cents {
  font-size: 0.55em;
  vertical-align: 0.5em;
  margin-left: 2px;
  color: var(--fg-muted);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* ============ DECORATION ============ */

.fa-rule-gold {
  /* The hairline gold rule from "—— AUTO PEÇAS ——" */
  display: inline-block;
  height: 1px;
  background: var(--gold-500);
  vertical-align: middle;
}

.fa-tagged {
  /* Wraps an eyebrow with two flanking gold rules — direct lift from the logo lockup */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-tag);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.fa-tagged::before,
.fa-tagged::after {
  content: "";
  flex: 1 0 24px;
  height: 1px;
  background: var(--gold-600);
}