/* ============================================================
   Ponderosa Pixels — Design System Tokens
   Source: Ponderosa_Pixels_Brand_System.pdf
   ============================================================ */

/* ============================================================
   Exo 2 — Variable Fonts (fully self-contained, no network dependency)
   Two rules cover the entire family: weight 100–900, normal + italic.
   ============================================================ */
@font-face {
  font-family: 'Exo 2';
  src: url('fonts/Exo2-VariableFont_wght.ttf') format('truetype supports variations'),
       url('fonts/Exo2-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Exo 2';
  src: url('fonts/Exo2-Italic-VariableFont_wght.ttf') format('truetype supports variations'),
       url('fonts/Exo2-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* Brand Colors */
  --color-pine:     #1f4336; /* Primary dark bg; hero areas */
  --color-sage:     #91a392; /* Logo, icons, highlights */
  --color-charcoal: #111313; /* Body text, headings on light */
  --color-canyon:   #be6b4b; /* Accent / CTA / interactive */
  --color-stone:    #f5f1ea; /* Default page background */
  --color-sand:     #e6dfd4; /* Cards, sections, dividers */

  /* Semantic Aliases — Backgrounds */
  --bg-primary:   var(--color-stone);    /* Default page canvas */
  --bg-secondary: var(--color-sand);     /* Cards, sections, elevated surfaces */
  --bg-dark:      var(--color-pine);     /* Hero, dark sections */
  --bg-overlay:   rgba(31, 67, 54, 0.7); /* Pine overlay on images */

  /* Semantic Aliases — Foreground / Text */
  --fg-primary:   var(--color-charcoal); /* Body text on light */
  --fg-secondary: #5a5550;               /* Secondary text, captions */
  --fg-muted:     #8a8480;               /* Placeholder, disabled */
  --fg-on-dark:   var(--color-stone);    /* Text on dark/Pine backgrounds */
  --fg-accent:    var(--color-canyon);   /* Highlighted / accent text */
  --fg-brand:     var(--color-sage);     /* Brand-toned text, icon color */

  /* Semantic Aliases — Interactive */
  --action-default:       var(--color-canyon);
  --action-hover:         #a85c3d;
  --action-active:        #944f33;
  --action-text:          var(--color-stone);

  /* Semantic Aliases — Borders & Dividers */
  --border-light:  var(--color-sand);   /* On Stone backgrounds */
  --border-dark:   rgba(145, 163, 146, 0.3); /* Sage-tinted on Pine */
  --border-accent: var(--color-canyon);

  /* Semantic Aliases — Shadows */
  --shadow-sm:  0 1px 4px rgba(17, 19, 19, 0.08);
  --shadow-md:  0 4px 16px rgba(17, 19, 19, 0.10);
  --shadow-lg:  0 12px 40px rgba(17, 19, 19, 0.14);

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 9999px;
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  /* Font Family */
  --font-primary: 'Exo 2', sans-serif;

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  /* Scale */
  --fs-h1:   56px;
  --fs-h2:   36px;
  --fs-h3:   20px;
  --fs-body: 16px;
  --fs-sm:   14px;
  --fs-xs:   12px;

  /* Line Heights */
  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.6;

  /* Letter Spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-widest:  0.08em;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

/* Base */
body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-primary);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-primary);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-primary);
}

.caption {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--fg-secondary);
  line-height: var(--lh-body);
}

.label {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.accent-text {
  color: var(--fg-accent);
}

.brand-text {
  color: var(--fg-brand);
}

/* On-dark variants */
.on-dark h1, .on-dark .h1,
.on-dark h2, .on-dark .h2,
.on-dark h3, .on-dark .h3,
.on-dark p,  .on-dark .body {
  color: var(--fg-on-dark);
}

/* ============================================================
   SPACING TOKENS
   ============================================================ */
:root {
  --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;
}