/* ============================================================
   Pindan Training — Colors & Type Tokens
   ============================================================
   Pindan: the deep red soil of the Kimberley.
   This system is built around warm, grounded, earth tones.
   No cool greys. No corporate blue. No drop shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --pindan-red:      #7A2E0E;   /* primary — pindan soil */
  --pindan-sienna:   #B85C38;   /* accent — lifted burnt sienna */
  --pindan-ember:    #D97534;   /* logo gradient mid — bright orange */
  --pindan-flare:    #F0A030;   /* logo gradient top — late-afternoon sun */

  --bone:            #F2EAE0;   /* light neutral — dry sand / bone */
  --bone-deep:       #E6D9C8;   /* slightly deeper sand for borders */
  --char:            #3A1E10;   /* dark neutral — deep wet Pindan soil */
  --char-soft:       #4D2A18;   /* one step up from char */
  --stone:           #6B5C52;   /* mid neutral — warm grey-brown */
  --stone-light:     #9B8B7E;   /* lighter stone for muted text */

  /* ---------- Semantic surfaces ---------- */
  --bg:              var(--bone);
  --bg-deep:         #EADFD0;
  --bg-dark:         var(--char);
  --surface:         #FFFFFF;          /* used sparingly — cards on dark bg */
  --surface-dark:    var(--char-soft);
  --border:          var(--bone-deep);
  --border-strong:   #C9B9A6;
  --border-dark:     #5C3C28;

  /* ---------- Semantic text ---------- */
  --fg1:             var(--char);      /* primary text on light bg */
  --fg2:             var(--stone);     /* secondary text */
  --fg3:             var(--stone-light); /* tertiary / captions */
  --fg-on-dark1:     var(--bone);      /* primary text on dark bg */
  --fg-on-dark2:     #C9B9A6;          /* secondary on dark */
  --link:            var(--pindan-red);
  --link-hover:      var(--pindan-sienna);

  /* ---------- Status (warm-shifted) ---------- */
  --warn:            #C4761F;   /* heat / advisory */
  --danger:          #A8321A;   /* darker than primary, urgent */
  --ok:              #5E7A3A;   /* dry-bush olive, not minty green */

  /* ---------- Type ---------- */
  --font-display:    'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-body:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (1.250 major third, anchored 16px) ---------- */
  --text-xs:         12px;
  --text-sm:         14px;
  --text-base:       16px;
  --text-md:         18px;
  --text-lg:         20px;
  --text-xl:         24px;
  --text-2xl:        32px;
  --text-3xl:        44px;
  --text-4xl:        60px;
  --text-5xl:        80px;
  --text-6xl:        112px;

  /* ---------- Line heights ---------- */
  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.5;
  --lh-loose:        1.7;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-none:     0;
  --radius-sm:       2px;       /* default — keep things grounded, not bubbly */
  --radius-md:       4px;
  --radius-lg:       8px;       /* cards */
  --radius-xl:       16px;      /* feature panels — used sparingly */
  --radius-pill:     999px;     /* tags only */

  /* ---------- Borders ---------- */
  --border-width:    1px;
  --border-width-2:  2px;
  --rule:            1px solid var(--border);
  --rule-strong:     1px solid var(--border-strong);
  --rule-dark:       1px solid var(--border-dark);

  /* ---------- Shadow — almost never used. Prefer borders + tonal contrast.
     When needed, shadows are warm-tinted, never cool grey. ---------- */
  --shadow-sm:       0 1px 0 rgba(28, 22, 18, 0.06);
  --shadow-md:       0 4px 12px -4px rgba(28, 22, 18, 0.12);
  --shadow-card:     0 1px 0 rgba(28, 22, 18, 0.04), 0 8px 24px -16px rgba(28, 22, 18, 0.18);

  /* ---------- Motion ---------- */
  --ease-out:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:        120ms;
  --dur-base:        200ms;
  --dur-slow:        360ms;

  /* ---------- Layout ---------- */
  --container:       1200px;
  --container-narrow:880px;
  --gutter:          24px;
}

/* ============================================================
   Base — element-level defaults
   ============================================================ */

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

/* ---------- Display & headings ---------- */
.display-hero,
h1.hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, var(--text-6xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--fg1);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg1);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0 0 var(--space-2);
}

/* ---------- Eyebrow / kicker — used above headings ---------- */
.eyebrow, .kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pindan-red);
}

/* ---------- Body copy ---------- */
p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--fg1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg2);
  max-width: 60ch;
}

.small, small {
  font-size: var(--text-sm);
  color: var(--fg2);
  line-height: var(--lh-normal);
}

.caption {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 600;
}

/* ---------- Links ---------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* ---------- Code / mono ---------- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-deep);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--char);
}

/* ---------- Selection ---------- */
::selection {
  background: var(--pindan-ember);
  color: var(--char);
}