/* Tucson Junk Co. — Design System CSS (all tokens inlined for standalone deploy) */

/* ── tokens/fonts.css ── */
/* Tucson Junk Co. — Webfonts
   All three families are Google Fonts (the live site loads them from the Google CDN).
   We import them here so every consumer of this design system gets the real typefaces.
   - Bebas Neue  : display / headlines (single weight 400)
   - DM Sans     : body copy (300, 400, 500, 700, 800)
   - DM Mono     : eyebrows / utility labels (400, 500)
*/
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700;9..40,800&display=swap");


/* ── tokens/colors.css ── */
/* Tucson Junk Co. — Color tokens
   The brand runs on a high-contrast black / charcoal / red system with white &
   off-white content surfaces. Red is the single accent — used for CTAs, eyebrows,
   active states and the signature cactus mark. Nothing else competes with it.
*/
:root {
  /* ---- Brand primitives ---- */
  --tjc-black: #0d0d0d;          /* page background, true black */
  --tjc-charcoal: #1a1a1a;       /* raised charcoal */
  --tjc-dark: #222222;           /* dark text on light / dark surfaces */
  --tjc-dark-grey: #4a4a4a;      /* official logo dark grey, secondary text */
  --tjc-dark-card: #111111;      /* card surface on dark sections */
  --tjc-dark-card-2: #1e1e1e;    /* secondary dark card / gradient top */

  --tjc-red: #cc1f27;            /* brand red — primary CTA */
  --tjc-red-bright: #e5232c;     /* bright red — hover, accents, eyebrows */
  --tjc-red-pale: #f9e5e6;       /* pale red — icon chip backgrounds */

  --tjc-white: #ffffff;
  --tjc-off-white: #f5f5f5;      /* light content section background */
  --tjc-gray-light: #e4e4e4;     /* light border, body text on dark */
  --tjc-gray-mid: #888888;       /* muted / fine-print text */

  --tjc-caution: #ffe600;        /* hazard yellow — owner-confirm placeholders only */

  /* ---- Semantic aliases ---- */
  --surface-page: var(--tjc-black);
  --surface-section: var(--tjc-off-white);
  --surface-card-dark: var(--tjc-dark-card);
  --surface-card-light: var(--tjc-white);
  --surface-band: var(--tjc-black);

  --text-on-dark: var(--tjc-off-white);
  --text-on-light: var(--tjc-dark);
  --text-heading-dark: var(--tjc-white);
  --text-heading-light: var(--tjc-black);
  --text-muted: var(--tjc-gray-mid);

  --accent: var(--tjc-red);
  --accent-hover: var(--tjc-red-bright);
  --accent-soft: var(--tjc-red-pale);

  --border-on-dark: rgba(255, 255, 255, 0.1);
  --border-on-light: rgba(0, 0, 0, 0.1);
  --focus-ring: var(--tjc-red-bright);
}


/* ── tokens/typography.css ── */
/* Tucson Junk Co. — Typography tokens
   Three families, sharply separated by role:
   - Bebas Neue : condensed, uppercase, tight leading — every headline.
   - DM Sans    : the workhorse for body, leans heavy (700/800) for UI labels.
   - DM Mono    : eyebrows, step numbers, prices-notes — uppercase utility voice.
*/
:root {
  /* ---- Families ---- */
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;
  --font-mono: "DM Mono", Consolas, "SF Mono", monospace;

  /* ---- Display scale (Bebas Neue, clamped & responsive) ---- */
  --display-1: clamp(3.7rem, 6vw, 6.2rem); /* @kind font */
  --display-2: clamp(2.8rem, 5.6vw, 5.4rem); /* @kind font */
  --display-3: clamp(1.9rem, 3vw, 2.7rem); /* @kind font */
  --display-line: 0.95; /* @kind font */

  /* ---- Body scale (DM Sans) ---- */
  --text-lede: clamp(1rem, 1.5vw, 1.16rem); /* @kind font */
  --text-base: 1rem; /* @kind font */
  --text-sm: 0.92rem; /* @kind font */
  --text-xs: 0.82rem; /* @kind font */
  --body-line: 1.6; /* @kind font */

  /* ---- Mono / eyebrow ---- */
  --eyebrow-size: 0.82rem;
  --eyebrow-weight: 500;

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 900;
}


/* ── tokens/spacing.css ── */
/* Tucson Junk Co. — Spacing, radii, shadows & layout tokens
   The system is utilitarian: small 4–8px radii, light hairline borders, and one
   chunky drop shadow reserved for hero media. The signature "diagonal hazard
   stripe" and the red baseline rule are codified here too.
*/
:root {
  /* ---- Radii ---- */
  --radius: 8px;        /* default card / button radius */
  --radius-sm: 4px;     /* tight inner elements */
  --radius-pill: 999px; /* trust chips */

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.55rem;
  --space-3: 0.8rem;
  --space-4: 1rem;      /* default card padding / grid gap */
  --space-5: 1.25rem;   /* card padding */
  --space-6: 1.55rem;
  --space-8: 2rem;
  --section-y: clamp(4rem, 8vw, 7rem); /* @kind spacing */

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 780px;
  --header-h: 82px;

  /* ---- Borders ---- */
  --border-hairline-dark: 1px solid rgba(255, 255, 255, 0.1); /* @kind other */
  --border-hairline-light: 1px solid rgba(0, 0, 0, 0.1); /* @kind other */
  --rule-accent: 7px solid var(--tjc-red); /* @kind other */

  /* ---- Shadows ---- */
  --shadow-media: 0 18px 40px rgba(0, 0, 0, 0.24); /* hero image */
  --shadow-card-hover: 0 14px 28px rgba(0, 0, 0, 0.18);
  --shadow-block: 10px 10px 0 var(--tjc-black);    /* hard offset (caution panel) */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 180ms; /* @kind other */
  --dur-reveal: 520ms; /* @kind other */
  --lift: translateY(-2px); /* @kind other */
  --lift-card: translateY(-4px); /* @kind other */

  /* ---- Signature stripe ---- */
  --stripe-size: 44px;
}


/* ── tokens/base.css ── */
/* Tucson Junk Co. — Base element styles
   Global defaults so any consuming page inherits the brand look without extra work.
   Mirrors the production site: black page, off-white body text, Bebas headlines.
*/
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0 0 1rem;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text-heading-dark);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--display-line);
  text-transform: uppercase;
}

h1 { font-size: var(--display-1); }
h2 { font-size: var(--display-2); }
h3 { font-size: var(--display-3); }

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

::selection {
  background: var(--tjc-red);
  color: #fff;
}

/* Eyebrow — the DM Mono utility label that opens nearly every section */
.tjc-eyebrow {
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}