/* ============================================================
   BarberMaxx United States — Foundations
   Colors & Typography tokens. Import this in any artifact.
   ============================================================ */

/* --- Webfonts -------------------------------------------------
   Brand primary display: "BarberChop" — proprietary face,
   served locally from ./fonts/BarberChop.otf.
   Brand secondary: Montserrat (Google Fonts). Use 1:1.
   Big Shoulders Display kept as a metric-similar fallback so
   layout doesn't reflow during font swap on slow connections.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=Montserrat:wght@400;500;600;700;800&display=swap");

@font-face {
  font-family: "BarberChop";
  src: url("./fonts/BarberChop.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ COLOR — RAW PALETTE ============
     Pulled directly from the Brand Guide. Five values, period. */
  --bm-black:       #000000; /* Primary ink. Backgrounds, body, ALL CAPS display. */
  --bm-graphite:    #505353; /* Mid-grey. Secondary text, dividers, subtle fills. */
  --bm-blue:        #4F86C6; /* Brand accent — barber-pole blue. Links, badges. */
  --bm-fog:         #BEBEC6; /* Cool light grey. Borders, disabled, surface lines. */
  --bm-red:         #ED3024; /* Brand alert — barber-pole red. CTAs, emphasis. */
  --bm-white:       #FFFFFF; /* Pure white. Reverse type, paper surfaces. */

  /* ============ COLOR — SEMANTIC ============ */
  /* Surfaces */
  --bg-page:        var(--bm-black);
  --bg-paper:       #0B0B0C;     /* near-black card */
  --bg-elevated:    #161618;     /* tooltip / popover */
  --bg-paper-light: var(--bm-white);
  --bg-tile:        #1B1B1E;     /* product card on dark */
  --bg-stripe:      #0F0F11;     /* alternating row */

  /* Foreground */
  --fg-1:           var(--bm-white);   /* primary text on dark */
  --fg-2:           #C9C9CE;           /* secondary text on dark */
  --fg-3:           var(--bm-graphite);/* tertiary / metadata */
  --fg-ink:         var(--bm-black);   /* primary text on light */
  --fg-ink-2:       #2A2A2C;           /* secondary on light */
  --fg-ink-3:       var(--bm-graphite);

  /* Lines */
  --line:           #1F1F22;           /* hairline on dark */
  --line-soft:      rgba(255,255,255,0.08);
  --line-ink:       var(--bm-fog);     /* line on light */

  /* Accents */
  --accent:         var(--bm-red);     /* primary CTA, sale tags */
  --accent-blue:    var(--bm-blue);    /* informational, secondary CTA */
  --accent-hover:   #FF4337;
  --accent-press:   #C8221A;

  /* Status (derived from palette where possible) */
  --status-success: #2FA871;           /* derived green, used sparingly */
  --status-warning: #F5A524;           /* derived warm, used sparingly */
  --status-danger:  var(--bm-red);

  /* ============ TYPOGRAPHY — FAMILIES ============ */
  --font-display: "BarberChop", "Big Shoulders Display", "Oswald", Impact, sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ TYPOGRAPHY — SCALE ============
     Mobile-first; bump display sizes on large screens. */
  --fs-display-xl: clamp(56px, 9vw, 128px); /* hero */
  --fs-display-l:  clamp(40px, 6vw, 88px);  /* page title */
  --fs-display-m:  clamp(32px, 4vw, 56px);  /* section */
  --fs-h1:         clamp(28px, 3vw, 40px);
  --fs-h2:         clamp(22px, 2.2vw, 30px);
  --fs-h3:         18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;

  --lh-display:    0.92;
  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-body:       1.55;

  /* Letter-spacing (display is condensed/heavy; body is plain) */
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-button:  0.08em;

  /* ============ SPACING ============ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ============ RADII ============
     The brand is masculine and architectural — radii are SMALL.
     Sharp corners on display surfaces; subtle on form fields. */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ============ SHADOWS ============
     Brand is dark; shadows are heavy & directional. */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-3: 0 12px 28px rgba(0,0,0,0.55);
  --shadow-4: 0 24px 60px rgba(0,0,0,0.7);
  --shadow-red:  0 6px 24px rgba(237, 48, 36, 0.35);
  --shadow-blue: 0 6px 24px rgba(79, 134, 198, 0.35);

  /* ============ BORDERS ============ */
  --b-hair:  1px solid var(--line);
  --b-soft:  1px solid var(--line-soft);
  --b-ink:   1px solid var(--bm-black);
  --b-fog:   1px solid var(--bm-fog);
  --b-accent:1px solid var(--accent);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ============ LAYOUT ============ */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: 24px;
  --header-h: 72px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply on the document root or scope under [data-bm].
   ============================================================ */

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

h1, .h1, .display-l {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
h2, .h2, .display-m {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-m);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  margin: 0;
}

p { margin: 0 0 var(--s-4); color: var(--fg-2); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-2);
}

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

code, pre { font-family: var(--font-mono); font-size: 13px; }

/* Reverse: light-theme blocks (paper-on-dark surfaces) */
[data-theme="light"] {
  background: var(--bg-paper-light);
  color: var(--fg-ink);
}
[data-theme="light"] p { color: var(--fg-ink-2); }
[data-theme="light"] small, [data-theme="light"] .caption { color: var(--fg-ink-3); }