/* ============================================================
   xFusion Design System — colors_and_type.css
   The single source of truth for design tokens.
   ============================================================ */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */

  /* Paper (background scale, warmest neutral) */
  --color-paper:        #F7F2EB;  /* page background */
  --color-paper-2:      #EFE8DD;  /* alt section background */
  --color-paper-3:      #E6DCCB;  /* sunken / inset */

  /* Ink (text scale, warm near-black through tan) */
  --color-ink:          #1F1A17;  /* primary text */
  --color-ink-2:        #3A322D;  /* secondary text, captions */
  --color-ink-3:        #6B5F56;  /* tertiary text, metadata */
  --color-ink-4:        #9E9388;  /* placeholder, disabled */

  /* Rule / divider — used for hairlines */
  --color-rule:         #D9CFBF;
  --color-rule-strong:  #B7A993;

  /* Primary — Clay */
  --color-clay:         #B8512C;
  --color-clay-hover:   #A0451F;
  --color-clay-press:   #863818;
  --color-clay-soft:    #F2D9CB;  /* tinted background */

  /* Secondary — Forest */
  --color-forest:       #2C4A3E;
  --color-forest-hover: #243C32;
  --color-forest-soft:  #D7E0DC;

  /* Accent — Butter */
  --color-butter:       #F0D9A8;
  --color-butter-soft:  #F8EBC9;

  /* Semantic */
  --color-success:      #3A6B4E;
  --color-warning:      #B8851F;
  --color-danger:       #A8341E;
  --color-info:         #2C4A6B;

  /* ============================================================
     COLOR — Semantic aliases (use these in components)
     ============================================================ */
  --color-bg:           var(--color-paper);
  --color-bg-alt:       var(--color-paper-2);
  --color-bg-inset:     var(--color-paper-3);
  --color-fg:           var(--color-ink);
  --color-fg-muted:     var(--color-ink-2);
  --color-fg-subtle:    var(--color-ink-3);
  --color-fg-disabled:  var(--color-ink-4);
  --color-border:       var(--color-rule);
  --color-border-strong:var(--color-rule-strong);
  --color-primary:      var(--color-clay);
  --color-primary-hover:var(--color-clay-hover);
  --color-primary-press:var(--color-clay-press);
  --color-link:         var(--color-clay);
  --color-on-primary:   var(--color-paper);
  --color-on-forest:    var(--color-paper);

  /* ============================================================
     TYPOGRAPHY — Families
     ============================================================ */
  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     TYPOGRAPHY — Scale (1.25 ratio, base 16px)
     ============================================================ */
  --fs-caption:   12px;
  --fs-small:     14px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-h5:        20px;
  --fs-h4:        24px;
  --fs-h3:        30px;
  --fs-h2:        38px;
  --fs-h1:        48px;
  --fs-display-2: 64px;
  --fs-display-1: 80px;

  /* ============================================================
     TYPOGRAPHY — Line heights
     ============================================================ */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  /* ============================================================
     TYPOGRAPHY — Letter spacing
     ============================================================ */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.12em;

  /* ============================================================
     TYPOGRAPHY — Weights
     ============================================================ */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
     SPACING — 8pt scale
     ============================================================ */
  --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;

  /* Section padding shortcuts */
  --section-pad-y-mobile:  48px;
  --section-pad-y-desktop: 96px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-pill: 999px; /* used only for tags / chips, never buttons */

  /* ============================================================
     SHADOWS — warm-tinted, low opacity
     ============================================================ */
  --shadow-sm: 0 2px 8px rgba(31, 26, 23, 0.05), 0 1px 2px rgba(31, 26, 23, 0.04);
  --shadow-md: 0 8px 24px rgba(31, 26, 23, 0.08), 0 2px 6px rgba(31, 26, 23, 0.05);
  --shadow-lg: 0 24px 48px rgba(31, 26, 23, 0.10), 0 4px 12px rgba(31, 26, 23, 0.06);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter-mobile: 16px;
  --gutter-desktop: 24px;

  /* Breakpoints (reference only; use in @media) */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-enter:  cubic-bezier(0.2, 0, 0, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-slower:  600ms;

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-nav:     50;
  --z-overlay: 80;
  --z-modal:   90;
  --z-toast:   100;
}

/* ============================================================
   Base reset + body
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic typography defaults
   ============================================================ */
.display-1, h1.display, .display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-display-2), 6vw, var(--fs-display-1));
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h1), 5vw, var(--fs-display-2));
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h2), 4vw, var(--fs-h1));
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-h3), 3.2vw, var(--fs-h2));
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  color: var(--color-fg);
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; }
.body-sm, small { font-size: var(--fs-small); line-height: 1.5; }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--color-fg-subtle); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-fg-subtle);
  margin: 0 0 var(--space-3);
}

.lede {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-body-lg), 1.8vw, 22px);
  line-height: 1.5;
  color: var(--color-fg-muted);
  text-wrap: pretty;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

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

/* Selection */
::selection { background: var(--color-butter); color: var(--color-ink); }