/* ==========================================================================
   Sławers Design System — Color + Type tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- Brand colors ----- */
  --slawers-black: #0F0F11;          /* primary brand black, slightly warm */
  --slawers-yellow: #FFC60B;          /* hazard / safety yellow */
  --slawers-yellow-deep: #E6A800;     /* hover/press for yellow */
  --slawers-yellow-soft: #FFE38A;     /* tinted backgrounds, badges */

  /* ----- Neutrals (steel grays, cool-leaning) ----- */
  --steel-950: #0F0F11;
  --steel-900: #1A1A1D;
  --steel-800: #2A2A2E;
  --steel-700: #3F3F44;
  --steel-500: #6B6B70;
  --steel-400: #8A8A8F;
  --steel-300: #A8A8AD;
  --steel-200: #D4D4D7;
  --steel-100: #E5E5E7;
  --steel-50:  #F5F5F6;
  --offwhite:  #FAFAF7;               /* default light surface, faint warm */

  /* ----- Semantic ----- */
  --success: #1E8449;
  --success-bg: #E8F3EC;
  --danger:  #C0392B;
  --danger-bg: #F9E7E5;
  --warning: var(--slawers-yellow);

  /* ----- Foreground / background semantic tokens ----- */
  --bg:        var(--offwhite);
  --bg-elev:   #FFFFFF;
  --bg-inverse:var(--slawers-black);
  --bg-muted:  var(--steel-50);

  --fg-1:      var(--slawers-black);   /* primary text */
  --fg-2:      var(--steel-700);       /* secondary text */
  --fg-3:      var(--steel-500);       /* tertiary, captions */
  --fg-on-dark:var(--offwhite);
  --fg-accent: var(--slawers-yellow);

  --border-1:  var(--steel-100);       /* default card/input border */
  --border-2:  var(--steel-200);       /* heavier */
  --border-strong: var(--slawers-black);

  /* ----- Type ----- */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-sans:    'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ----- Type scale (rem assumes 16px base) ----- */
  --fs-display-1: clamp(3.5rem, 6vw + 1rem, 6.5rem);   /* hero */
  --fs-display-2: clamp(2.75rem, 4vw + 1rem, 4.5rem);  /* section openers */
  --fs-h1: 3rem;        /* 48 */
  --fs-h2: 2.25rem;     /* 36 */
  --fs-h3: 1.5rem;      /* 24 */
  --fs-h4: 1.25rem;     /* 20 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-body-sm: 0.875rem; /* 14 */
  --fs-caption: 0.75rem;  /* 12 */

  --lh-tight: 0.95;
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.5;
  --lh-loose: 1.7;

  --tracking-display: -0.015em;
  --tracking-caps: 0.04em;
  --tracking-mono: 0;

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

  /* ----- Radii ----- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;

  /* ----- Shadows ----- */
  --shadow-sm: 0 1px 2px rgba(15,15,17,.06), 0 1px 1px rgba(15,15,17,.04);
  --shadow-md: 0 4px 12px rgba(15,15,17,.08), 0 2px 4px rgba(15,15,17,.04);
  --shadow-lg: 0 12px 32px rgba(15,15,17,.12), 0 4px 8px rgba(15,15,17,.06);

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;

  /* ----- Layout ----- */
  --container: 1280px;
  --gutter: 32px;
  --gutter-mobile: 16px;
  --header-h: 70px;
  --header-h-mobile: 56px;

  /* ----- Hazard stripe (utility) ----- */
  --hazard-stripes: repeating-linear-gradient(
    45deg,
    var(--slawers-yellow) 0 12px,
    var(--slawers-black) 12px 24px
  );
}

/* ==========================================================================
   Semantic typography classes — use these in components
   ========================================================================== */

.t-display-1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.t-display-2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
}

.t-link {
  color: var(--fg-1);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.t-link:hover { background-size: 100% 1px; }

/* ==========================================================================
   Default element styles (for raw HTML usage in design system previews)
   ========================================================================== */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: 700 var(--fs-h1)/var(--lh-heading) var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 0; }
h2 { font: 700 var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 0; }
h3 { font: 600 var(--fs-h3)/var(--lh-heading) var(--font-sans); margin: 0; }
h4 { font: 600 var(--fs-h4)/var(--lh-heading) var(--font-sans); margin: 0; }
p  { margin: 0 0 var(--sp-4) 0; text-wrap: pretty; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--slawers-yellow); color: var(--slawers-black); }