/* ============================================================
   ArdoHub Design System — Tokens & base type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ----- Color: brand (warm, original ArdoHub palette) ----- */
  --ardo-clay:        #C5462E;
  --ardo-clay-dark:   #A53A24;
  --ardo-clay-light:  #E06548;
  --ardo-mustard:     #D4A02E;
  --ardo-olive:       #3F4A2A;
  --ardo-rose:        #E8B5A1;
  --ardo-rose-light:  #F4D5C6;

  /* ----- Color: neutrals (warm) ----- */
  --ardo-ink:         #1A1410;
  --ardo-ink-80:      rgba(26, 20, 16, 0.80);
  --ardo-ink-60:      rgba(26, 20, 16, 0.60);
  --ardo-ink-40:      rgba(26, 20, 16, 0.40);
  --ardo-ink-20:      rgba(26, 20, 16, 0.20);
  --ardo-ink-15:      rgba(26, 20, 16, 0.15);
  --ardo-ink-10:      rgba(26, 20, 16, 0.10);
  --ardo-ink-05:      rgba(26, 20, 16, 0.05);

  --ardo-cream:       #F4ECDF;
  --ardo-paper:       #FBF7EF;
  --ardo-paper-2:     #EDE3D2;

  /* ----- Semantic ----- */
  --color-bg:           var(--ardo-cream);
  --color-bg-elevated:  var(--ardo-paper);
  --color-bg-sunken:    var(--ardo-paper-2);
  --color-fg-1:         var(--ardo-ink);
  --color-fg-2:         var(--ardo-ink-80);
  --color-fg-3:         var(--ardo-ink-60);
  --color-fg-muted:     var(--ardo-ink-40);
  --color-border:       var(--ardo-ink-15);
  --color-border-strong:var(--ardo-ink);
  --color-border-soft:  var(--ardo-ink-10);
  --color-primary:      var(--ardo-clay);
  --color-primary-hover:var(--ardo-clay-dark);
  --color-success:      var(--ardo-olive);
  --color-warning:      var(--ardo-mustard);
  --color-on-primary:   var(--ardo-paper);

  /* ----- Type ----- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;

  --fs-display-xl: 96px;
  --fs-display-lg: 80px;
  --fs-display-md: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-l: 18px;
  --fs-body-m: 16px;
  --fs-body-s: 14px;
  --fs-caption: 12px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* ----- Spacing ----- */
  --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-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ----- Shadows ----- */
  --shadow-xs:  0 1px 2px rgba(26,20,16,0.04);
  --shadow-sm:  0 2px 8px rgba(26,20,16,0.06);
  --shadow-md:  0 8px 24px rgba(26,20,16,0.08);
  --shadow-lg:  0 20px 50px rgba(26,20,16,0.12);
  --shadow-clay-glow: 0 12px 30px rgba(197,70,46,0.30);

  /* ----- Motion ----- */
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-med:  400ms;
  --dur-slow: 700ms;

  /* ----- Layout ----- */
  --container-max: 1200px;
  --gutter-mobile: 24px;
  --gutter-desktop: 48px;
}

/* ============================================================
   Base type styles (semantic vars)
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: var(--lh-base);
  color: var(--color-fg-1);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-fg-1);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.005em; line-height: var(--lh-snug); }

p  { margin: 0; line-height: var(--lh-base); color: var(--color-fg-2); }

.display-xl { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: -0.04em; }
.display-lg { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: -0.035em; }
.display-md { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-md); line-height: var(--lh-tight); letter-spacing: -0.03em; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-3);
}

.body-l { font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--color-fg-2); }
.body-s { font-size: var(--fs-body-s); line-height: var(--lh-base); color: var(--color-fg-3); }
.caption{ font-size: var(--fs-caption); line-height: var(--lh-base); color: var(--color-fg-3); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--ardo-clay); color: var(--ardo-paper); }