/* ============================================================
 * TUGG — Colors & Type
 * Brand Guidelines 2026
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Built Titling — licensed brand display family (Aerotype). */
@font-face { font-family: "Built Titling"; src: url("fonts/built_titling_rg.otf")    format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Built Titling"; src: url("fonts/built_titling_bd.otf")    format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Color tokens ---------- */

  /* Primary */
  --color-forest-wild:    #2E3B32;   /* "Gunmetal Gray" — primary, deep forest */
  --color-bone:           #F6F4EF;   /* "Authentic Cream" — primary surface */

  /* Secondary */
  --color-moon-gray:      #8E928F;   /* Neutral mid-gray */
  --color-blackout:       #1D1E1E;   /* Deepest text / monochrome lockup */

  /* Accent — used sparingly. The logo color. */
  --color-flame:          #E64801;   /* Brand accent / logo */

  /* Tonal extensions (oklch-derived from the four core tokens) */
  --color-forest-deep:    #1F2A22;   /* Forest Wild, darker */
  --color-forest-soft:    #3F5044;   /* Forest Wild, lifted */
  --color-bone-warm:      #EDE8DD;   /* Bone, slightly warmer */
  --color-bone-shadow:    #DCD7CB;   /* Bone, dropped a step for hairlines */

  /* Semantic — surface */
  --bg:                   var(--color-bone);
  --bg-alt:               var(--color-bone-warm);
  --bg-inverse:           var(--color-forest-wild);
  --bg-inverse-deep:      var(--color-forest-deep);

  /* Semantic — foreground */
  --fg:                   var(--color-blackout);
  --fg-muted:             var(--color-moon-gray);
  --fg-on-inverse:        var(--color-bone);
  --fg-brand:             var(--color-forest-wild);

  /* Borders / hairlines */
  --border:               var(--color-bone-shadow);
  --border-strong:        var(--color-forest-wild);
  --border-on-inverse:    rgba(246, 244, 239, 0.18);

  /* Focus / accent */
  --focus-ring:           color-mix(in oklab, var(--color-forest-wild) 50%, transparent);

  /* ---------- Typography tokens ---------- */
  --font-display:         "Built Titling", "Oswald", "Impact", system-ui, sans-serif;
  --font-body:            "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:            ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* Type scale (modular, 1.25 ratio for body, larger jumps for display) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   80px;
  --fs-6xl:   112px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-loose:   1.7;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.18em;
  --tracking-body:    0;

  /* ---------- Spacing / radius / shadow ---------- */
  --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;

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Shadows are minimal — the brand reads "clinical, premium, no fluff" */
  --shadow-hairline: 0 0 0 1px var(--border);
  --shadow-sm:       0 1px 2px rgba(29, 30, 30, 0.06);
  --shadow-md:       0 8px 24px rgba(29, 30, 30, 0.08);
  --shadow-lg:       0 24px 60px rgba(29, 30, 30, 0.14);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

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

/* ---------- Semantic typographic classes ---------- */
.t-display,
.t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: 700; /* Built Titling Bold */
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.t-display { font-size: clamp(72px, 12vw, var(--fs-6xl)); }
.t-h1      { font-size: clamp(44px, 7vw, var(--fs-4xl)); }
.t-h2      { font-size: clamp(32px, 5vw, var(--fs-3xl)); }
.t-h3      { font-size: var(--fs-2xl); line-height: var(--lh-snug); }

.t-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.t-body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.t-small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--fg);
}

/* ---------- Element-level defaults ---------- */
h1 { @extend .t-h1; }
/* (For non-SCSS consumers — apply .t-h1, .t-h2 etc. as classes.) */