/* =========================================================
   THE OUTFIT HOUSE — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   ========================================================= */

/* Webfonts (Google Fonts substitutes — see README "Type" section) */
/* Fonts loaded via <link> in each HTML file for faster rendering */

:root {
  /* ---------- BRAND PALETTE ---------- */
  --toh-black:        #060403;   /* primary background — near-black tinted toward brand yellow */
  --toh-eggshell:     #F2ECDD;   /* secondary background, primary fg on dark */
  --toh-hampton:      #E8D3B2;   /* warm neutral */
  --toh-yellow:       #E3A848;   /* Indian Yellow — accent ONLY */

  /* Extended scale (derived, used sparingly for surfaces and dividers) */
  --toh-black-900:    #060403;
  --toh-black-800:    #0A0A0A;
  --toh-black-700:    #141414;   /* card / elevated surface on dark */
  --toh-black-600:    #1C1C1C;   /* hover surface on dark */
  --toh-black-500:    #2A2A2A;   /* divider on dark */
  --toh-eggshell-50:  #FAF6EC;
  --toh-eggshell-100: #F2ECDD;
  --toh-eggshell-200: #EAE2CD;
  --toh-hampton-300:  #E8D3B2;
  --toh-hampton-400:  #D9BE94;
  --toh-yellow-400:   #E8B561;
  --toh-yellow-500:   #E3A848;
  --toh-yellow-600:   #C28C30;

  /* ---------- SEMANTIC: DARK SURFACE (primary) ---------- */
  --bg:               var(--toh-black);
  --bg-elev:          var(--toh-black-700);
  --bg-elev-hover:    var(--toh-black-600);
  --surface-glass:    rgba(20, 20, 20, 0.55);    /* glassmorphism panel on dark */
  --surface-glass-warm: rgba(242, 236, 221, 0.06);
  --surface-dropdown: #0d0d0d;                   /* nav dropdown + sort menus */
  --surface-spec:     rgba(26, 26, 26, 0.70);    /* spec grid cells */

  --fg:               var(--toh-eggshell);       /* primary text on dark */
  --fg-muted:         rgba(242, 236, 221, 0.65); /* secondary text on dark */
  --fg-subtle:        rgba(242, 236, 221, 0.60); /* tertiary / labels — ~4.9:1 on #060403, clears WCAG AA */
  --fg-warm:          var(--toh-hampton);        /* warm accent text */

  --border:           rgba(242, 236, 221, 0.10);
  --border-strong:    rgba(242, 236, 221, 0.20);
  --divider:          var(--toh-black-500);

  --accent:           var(--toh-yellow);
  --accent-hover:     var(--toh-yellow-400);
  --accent-press:     var(--toh-yellow-600);
  --accent-on:        var(--toh-black);          /* fg on yellow */
  --accent-on-20:     rgba(6, 4, 3, 0.20);       /* border on yellow surface */
  --accent-on-35:     rgba(6, 4, 3, 0.35);       /* border on yellow surface, stronger */
  --accent-on-55:     rgba(6, 4, 3, 0.55);       /* muted text on yellow surface */
  --accent-on-65:     rgba(6, 4, 3, 0.65);       /* secondary text on yellow surface */

  /* ---------- SEMANTIC: LIGHT SURFACE ---------- */
  --bg-light:         var(--toh-eggshell);
  --bg-light-elev:    var(--toh-eggshell-50);
  --fg-on-light:      var(--toh-black);
  --fg-muted-on-light:rgba(0, 0, 0, 0.60);
  --border-on-light:  rgba(0, 0, 0, 0.10);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:     'Bebas Neue', 'Anton', 'Oswald', system-ui, sans-serif; /* condensed display */
  --font-heading:     'Archivo', 'Inter', system-ui, sans-serif;              /* geometric headings */
  --font-body:        'Archivo', system-ui, -apple-system, sans-serif;        /* body */
  --font-brush:       'Permanent Marker', 'Caveat Brush', cursive;            /* expressive only */
  --font-mono:        ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-xl:    clamp(64px, 9vw, 144px);   /* hero, condensed */
  --fs-display-lg:    clamp(48px, 6vw, 96px);
  --fs-display-md:    clamp(36px, 4.5vw, 64px);
  --fs-h1:            clamp(32px, 3.5vw, 48px);
  --fs-h2:            28px;
  --fs-h3:            22px;
  --fs-h4:            18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;
  --fs-eyebrow:       11px;   /* uppercase tracked label */

  --lh-tight:         0.95;
  --lh-snug:          1.15;
  --lh-normal:        1.5;
  --lh-loose:         1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;   /* eyebrows, spec labels */
  --tracking-widest:  0.24em;

  /* ---------- SPACING (4pt base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-0:   0px;       /* most surfaces — industrial, sharp */
  --radius-sm:  2px;
  --radius-md:  4px;       /* default for inputs, chips */
  --radius-lg:  8px;       /* cards */
  --radius-xl:  16px;      /* modals, large panels */
  --radius-pill:999px;     /* tags, pills */

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow-yellow: 0 0 32px rgba(227, 168, 72, 0.25);
  --inner-line: inset 0 0 0 1px var(--border);

  /* ---------- BLUR (glassmorphism) ---------- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* ---------- OVERLAY ---------- */
  --overlay-nav:      rgba(0, 0, 0, 0.78);  /* sticky nav + filter bars */
  --overlay-strong:   rgba(0, 0, 0, 0.85);  /* heavy overlay surfaces */
  --overlay-backdrop: rgba(0, 0, 0, 0.60);  /* drawer backdrop */

  --surface-hover:        rgba(255, 255, 255, 0.04); /* hover tint on dark surfaces */
  --surface-hover-subtle: rgba(255, 255, 255, 0.02); /* softer hover tint */
  --scrollbar-thumb:      #484848;

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ---------- LAYOUT ---------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1280px;
  --container-xl: 1440px;
  --gutter:       24px;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Use directly via element selectors or apply via classes.
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: var(--font-display); letter-spacing: var(--tracking-normal); }
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-brush   { font-family: var(--font-brush); }
.font-mono    { font-family: var(--font-mono); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  margin: 0;
}
p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  margin: 0;
}
small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
}

/* Eyebrow / Spec label — used for "UA SPEC", "7A QUALITY", category labels */
.eyebrow, .spec-label {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-muted);
}

/* Brush expressive headline — sparingly */
.brush {
  font-family: var(--font-brush);
  font-size: var(--fs-display-lg);
  line-height: 0.9;
  color: var(--fg);
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); border-color: var(--accent); }

::selection { background: var(--accent); color: var(--accent-on); }

/* =========================================================
   SCROLLBAR
   ========================================================= */
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--toh-black); }

/* Chromium / Safari */
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: var(--toh-black); }
::-webkit-scrollbar-thumb        { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: #6a6a6a; }
::-webkit-scrollbar-corner       { background: var(--toh-black); }