/* ============================================================
   Arthur Chabert — Design System
   Colors + Typography Foundations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=General+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* General Sans is hosted via Fontshare; we use a Google-Fonts-hosted
   substitute (Manrope-equivalent metrics) as a fallback.
   NOTE: ⚠ FONT SUBSTITUTION — the original brief calls for "General Sans"
   from Fontshare. We've imported it via Fontshare CDN below.
   If it fails to load, the system falls back to Inter via Google Fonts. */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* ---------- Color Foundations ---------- */

  /* Cream / paper backgrounds */
  --cream-50:  #FFFDFA;   /* page bg, lightest */
  --cream-100: #FBF7F2;   /* primary surface */
  --cream-200: #F5EFE6;   /* raised surface */
  --cream-300: #EDE3D4;   /* hover / muted block */
  --cream-400: #DCCFB8;   /* divider, soft chip */

  /* Terracotta — primary brand */
  --terracotta-300: #F4C2A1;  /* tint, badge bg */
  --terracotta-400: #E89673;  /* hover */
  --terracotta-500: #D97757;  /* PRIMARY */
  --terracotta-600: #B85C3F;  /* press / link-active */
  --terracotta-700: #8E4329;  /* deep accent */

  /* Clay / warm taupe — secondary */
  --clay-300: #C9B5A0;
  --clay-500: #7A6450;
  --clay-700: #4A3A2C;

  /* Ink — near-black with warm undertone */
  --ink-900: #1F1B16;   /* primary text */
  --ink-800: #2E2820;
  --ink-700: #3D352B;
  --ink-500: #6B5F52;   /* secondary text */
  --ink-400: #8C8073;   /* muted / placeholder */
  --ink-300: #B5AB9D;   /* disabled */

  /* Semantic accents (kept warm) */
  --success: #6B8E4E;   /* moss */
  --warning: #D4A24C;   /* amber */
  --danger:  #B8442C;   /* burnt red */
  --info:    #5C7A8C;   /* dusk blue */

  /* ---------- Semantic role tokens ---------- */
  --bg:           var(--cream-100);
  --bg-elevated:  var(--cream-50);
  --bg-muted:     var(--cream-200);
  --bg-hover:     var(--cream-300);
  --border:       var(--cream-400);
  --border-strong: var(--clay-300);

  --fg:           var(--ink-900);
  --fg-secondary: var(--ink-500);
  --fg-muted:     var(--ink-400);
  --fg-on-accent: var(--cream-50);

  --accent:        var(--terracotta-500);
  --accent-hover:  var(--terracotta-400);
  --accent-press:  var(--terracotta-600);
  --accent-tint:   var(--terracotta-300);

  /* ---------- Typography ---------- */
  --font-sans: 'General Sans', 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular, tight tracking */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   88px;
  --text-6xl:   128px;  /* big editorial numbers */

  /* Line-heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Tracking — geometric sans wants tight */
  --track-tightest: -0.04em;
  --track-tighter:  -0.02em;
  --track-tight:    -0.01em;
  --track-normal:    0;
  --track-wide:      0.04em;
  --track-widest:    0.12em;   /* eyebrow labels, all-caps */

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---------- Spacing (4-pt 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-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Shadows (warm-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(61, 40, 23, 0.06);
  --shadow-sm: 0 2px 6px rgba(61, 40, 23, 0.06), 0 1px 2px rgba(61, 40, 23, 0.04);
  --shadow-md: 0 8px 20px rgba(61, 40, 23, 0.08), 0 2px 4px rgba(61, 40, 23, 0.04);
  --shadow-lg: 0 24px 48px rgba(61, 40, 23, 0.12), 0 4px 8px rgba(61, 40, 23, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(61, 40, 23, 0.08);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1180px;
  --container-xl:  1440px;
  --gutter:        24px;
}

/* ============================================================
   Element defaults
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Headings ---------- */
.h-display {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tightest);
  color: var(--fg);
}
.h-display-xl {
  font-family: var(--font-sans);
  font-size: var(--text-6xl);
  font-weight: var(--w-semibold);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--fg);
}

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tightest);
  color: var(--fg);
}
h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tighter);
  color: var(--fg);
}
h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tighter);
  color: var(--fg);
}
h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--track-tight);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

/* Eyebrow / label — uppercase, wide-tracked */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--fg-secondary);
}

/* Big editorial number — signature motif */
.numeral {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--w-medium);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--track-tightest);
  color: var(--fg);
}
.numeral-xl {
  font-family: var(--font-sans);
  font-size: var(--text-6xl);
  font-weight: var(--w-medium);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.06em;
  line-height: 0.85;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--ink-700);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--terracotta-500);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--terracotta-600);
  text-decoration-color: var(--terracotta-600);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

::selection {
  background: var(--terracotta-300);
  color: var(--ink-900);
}