/* ============================================================
   WODR DESIGN SYSTEM — Shared Tokens
   Source: brand/Claude.ai Design/Wodr Design System v2/colors_and_type.css
   Adapted for production use with woff2 fonts.
   ============================================================ */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "Ethic Serif";
  src: url("../fonts/EthicSerif-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ethic Serif";
  src: url("../fonts/EthicSerif-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Ethic Serif";
  src: url("../fonts/EthicSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ethic Serif";
  src: url("../fonts/EthicSerif-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Montserrat from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

/* ---------- ROOT TOKENS ---------- */
:root {
  /* Foundational colour palette */
  --wodr-char:        #2B2622;
  --wodr-linen:       #F1EEE9;
  --wodr-skyfall:     #D4DBDF;
  --wodr-mosswood:    #3C403D;
  --wodr-fieldstone:  #8F9884;
  --wodr-clayburn:    #664034;

  /* Tinted off-shades */
  --wodr-linen-50:    #F8F6F3;
  --wodr-linen-100:   #F1EEE9;
  --wodr-linen-200:   #E7E2D9;
  --wodr-linen-300:   #D8D1C4;
  --wodr-char-80:     rgba(43, 38, 34, 0.80);
  --wodr-char-60:     rgba(43, 38, 34, 0.60);
  --wodr-char-40:     rgba(43, 38, 34, 0.40);
  --wodr-char-12:     rgba(43, 38, 34, 0.12);
  --wodr-char-06:     rgba(43, 38, 34, 0.06);

  /* Semantic foreground / background */
  --bg:               var(--wodr-linen);
  --bg-elevated:      var(--wodr-linen-50);
  --bg-sunken:        var(--wodr-linen-200);
  --bg-inverse:       var(--wodr-char);

  --fg:               var(--wodr-char);
  --fg-2:             var(--wodr-char-80);
  --fg-3:             var(--wodr-char-60);
  --fg-muted:         var(--wodr-char-40);
  --fg-inverse:       var(--wodr-linen);

  --border:           var(--wodr-linen-300);
  --border-strong:    var(--wodr-char-12);
  --hairline:         var(--wodr-char-12);

  /* Accents */
  --accent-warm:      var(--wodr-clayburn);
  --accent-cool:      var(--wodr-skyfall);
  --accent-natural:   var(--wodr-fieldstone);
  --accent-grounding: var(--wodr-mosswood);

  /* Visual pillars */
  --pillar-heat:      var(--wodr-clayburn);
  --pillar-cold:      var(--wodr-skyfall);
  --pillar-rest:      var(--wodr-fieldstone);

  /* Status colours — brand-aligned (no off-palette hues) */
  --success:          var(--wodr-fieldstone);            /* sage green */
  --success-bg:       rgba(143, 152, 132, 0.12);         /* fieldstone tint */
  --error:            var(--wodr-clayburn);              /* deep terracotta */
  --error-bg:         rgba(102, 64, 52, 0.12);           /* clayburn tint */
  --warning:          var(--wodr-mosswood);              /* grounding */
  --warning-bg:       rgba(60, 64, 61, 0.12);            /* mosswood tint */
  --info:             var(--wodr-mosswood);              /* neutral */
  --info-bg:          rgba(212, 219, 223, 0.40);         /* skyfall tint */

  /* Typography */
  --font-serif: "Ethic Serif", "Cormorant Garamond", Georgia, serif;
  --font-sans:  "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.6;

  /* Letter spacing */
  --tracking-display: -0.01em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.05em;

  /* 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;

  /* Radii */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* Shadows (almost imperceptible) */
  --shadow-xs: 0 1px 2px rgba(43, 38, 34, 0.04);
  --shadow-sm: 0 2px 8px rgba(43, 38, 34, 0.05);
  --shadow-md: 0 8px 24px rgba(43, 38, 34, 0.06);
  --shadow-lg: 0 24px 56px rgba(43, 38, 34, 0.08);

  /* Motion */
  --ease-flow: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-quick: 180ms;
  --dur-base:  320ms;
  --dur-slow:  600ms;
}

/* ---------- BASE RESETS ---------- */
html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { margin: 0; }

::selection {
  background: var(--wodr-fieldstone);
  color: var(--wodr-linen);
}

/* ---------- SEMANTIC TYPE ---------- */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(30px, 4vw, var(--text-3xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(24px, 3vw, var(--text-2xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-4);
}

small, .caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Links */
a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--wodr-char-40);
  transition: border-color var(--dur-base) var(--ease-flow);
}
a:hover {
  border-color: var(--fg);
  color: var(--accent-grounding);
}

/* Hairlines */
hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: var(--space-7) 0;
}

/* Background utilities */
.bg-linen     { background: var(--wodr-linen); color: var(--wodr-char); }
.bg-char      { background: var(--wodr-char); color: var(--wodr-linen); }
.bg-mosswood  { background: var(--wodr-mosswood); color: var(--wodr-linen); }
.bg-clayburn  { background: var(--wodr-clayburn); color: var(--wodr-linen); }
.bg-fieldstone{ background: var(--wodr-fieldstone); color: var(--wodr-linen); }
.bg-skyfall   { background: var(--wodr-skyfall); color: var(--wodr-char); }