/* ===========================================================================
   Cuttidam Design System — Tokens & Semantic Styles
   Load this file once at the top of any document.
   Pairs with Inter + Inter Tight from Google Fonts (loaded separately).
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ----------------------------------------------------------------------
     COLOR — CORE
     ---------------------------------------------------------------------- */
  --color-charcoal: #141414;       /* hero, dark surfaces, primary text on cream */
  --color-cream:    #F5F2EC;       /* default content background */
  --color-terracotta: #B5482E;     /* the single accent */

  /* ----------------------------------------------------------------------
     COLOR — TERRACOTTA SCALE (for hover/press, sparingly)
     ---------------------------------------------------------------------- */
  --terracotta-50:  #FBEFE9;
  --terracotta-100: #F2D5C7;
  --terracotta-200: #E2A990;
  --terracotta-300: #D17F5F;
  --terracotta-400: #C46341;
  --terracotta-500: #B5482E;       /* = --color-terracotta */
  --terracotta-600: #9A3C26;
  --terracotta-700: #7E311F;
  --terracotta-800: #5F2517;

  /* ----------------------------------------------------------------------
     COLOR — WARM NEUTRAL SCALE (derived from charcoal + cream)
     One scale, no cool grays.
     ---------------------------------------------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8F4;
  --neutral-100: #F5F2EC;          /* = --color-cream */
  --neutral-200: #ECE7DD;
  --neutral-300: #D9D2C5;
  --neutral-400: #B8B0A1;
  --neutral-500: #8A8275;
  --neutral-600: #5C564B;
  --neutral-700: #3A362F;
  --neutral-800: #25231F;
  --neutral-900: #141414;          /* = --color-charcoal */

  /* ----------------------------------------------------------------------
     COLOR — SEMANTIC FOREGROUND / BACKGROUND
     Use these in components, not the raw scales above.
     ---------------------------------------------------------------------- */
  --bg-primary:   var(--neutral-100);   /* default page bg */
  --bg-elevated:  var(--neutral-50);    /* cards on cream */
  --bg-inverse:   var(--neutral-900);   /* hero, dark sections */
  --bg-overlay:   rgba(20, 20, 20, 0.6);
  --bg-glass-light: rgba(245, 242, 236, 0.72);
  --bg-glass-dark:  rgba(20, 20, 20, 0.72);

  --fg-primary:    var(--neutral-900);  /* default text on cream */
  --fg-secondary:  var(--neutral-600);  /* sub-text, captions */
  --fg-tertiary:   var(--neutral-500);  /* hints, disabled */
  --fg-inverse:    var(--neutral-100);  /* default text on charcoal */
  --fg-inverse-secondary: var(--neutral-400);

  --fg-accent:     var(--color-terracotta);
  --fg-accent-hover: var(--terracotta-600);
  --fg-accent-press: var(--terracotta-700);

  /* ----------------------------------------------------------------------
     COLOR — LINES & DIVIDERS
     ---------------------------------------------------------------------- */
  --color-line:        rgba(20, 20, 20, 0.10);   /* on cream */
  --color-line-strong: rgba(20, 20, 20, 0.18);
  --color-line-hover:  rgba(20, 20, 20, 0.04);
  --color-line-inverse: rgba(245, 242, 236, 0.14); /* on charcoal */
  --color-line-inverse-strong: rgba(245, 242, 236, 0.24);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — FAMILIES
     ---------------------------------------------------------------------- */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — SIZES (fluid where appropriate)
     ---------------------------------------------------------------------- */
  --text-display-xl: clamp(56px, 8vw, 112px);
  --text-display-l:  clamp(40px, 5vw, 72px);
  --text-h1:         clamp(32px, 3.5vw, 48px);
  --text-h2:         32px;
  --text-h3:         22px;
  --text-body-l:     19px;
  --text-body:       16px;
  --text-small:      14px;
  --text-eyebrow:    12px;

  /* ----------------------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;
  --space-50:  200px;

  /* Section vertical padding (responsive) */
  --space-section: clamp(96px, 12vw, 200px);

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-max:  1280px;
  --content-max:    1080px;
  --prose-max:       680px;
  --grid-gutter:     24px;

  /* ----------------------------------------------------------------------
     RADII
     ---------------------------------------------------------------------- */
  --radius-none:  0;
  --radius-xs:    2px;       /* inputs */
  --radius-sm:    4px;       /* cards */
  --radius-pill:  999px;     /* chips, used sparingly */

  /* ----------------------------------------------------------------------
     SHADOWS — minimal, two tokens
     ---------------------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04), 0 4px 12px rgba(20, 20, 20, 0.06);
  --shadow-card-hover: 0 1px 2px rgba(20, 20, 20, 0.06), 0 12px 24px rgba(20, 20, 20, 0.10);
  --shadow-modal: 0 24px 64px rgba(20, 20, 20, 0.18);

  /* ----------------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------------- */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    700ms;

  /* ----------------------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------------------- */
  --z-nav:    100;
  --z-modal:  500;
  --z-toast:  600;
}

/* ===========================================================================
   SEMANTIC ELEMENT STYLES
   Apply these on top of resets. Element-level so consumers get them for free.
   =========================================================================== */

html {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0 0 var(--space-4) 0;
  color: var(--fg-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h3 {
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p {
  margin: 0 0 var(--space-4) 0;
  color: var(--fg-primary);
  font-size: var(--text-body);
  line-height: 1.6;
  text-wrap: pretty;
}

a {
  color: var(--fg-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-spring);
}

a:hover {
  color: var(--fg-accent);
}

small {
  font-size: var(--text-small);
  color: var(--fg-secondary);
}

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

button {
  font-family: var(--font-display);
  font-size: var(--text-body);
}

::selection {
  background: var(--color-terracotta);
  color: var(--neutral-0);
}

/* ===========================================================================
   UTILITY CLASSES (used by preview cards + UI kit)
   =========================================================================== */

.display-xl { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-xl); letter-spacing: -0.03em; line-height: 0.95; }
.display-l  { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-l);  letter-spacing: -0.025em; line-height: 1.0; }
.h1         { font-family: var(--font-display); font-weight: 500; font-size: var(--text-h1); letter-spacing: -0.02em; line-height: 1.05; }
.h2         { font-family: var(--font-display); font-weight: 500; font-size: var(--text-h2); letter-spacing: -0.015em; line-height: 1.15; }
.h3         { font-family: var(--font-display); font-weight: 500; font-size: var(--text-h3); letter-spacing: -0.01em; line-height: 1.25; }
.body-l     { font-family: var(--font-body); font-size: var(--text-body-l); line-height: 1.55; }
.body       { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; }
.small      { font-family: var(--font-body); font-size: var(--text-small); line-height: 1.5; color: var(--fg-secondary); }
.eyebrow    {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-accent);
  line-height: 1.0;
}

/* Surfaces */
.surface-cream    { background: var(--bg-primary); color: var(--fg-primary); }
.surface-charcoal { background: var(--bg-inverse); color: var(--fg-inverse); }
.surface-charcoal h1, .surface-charcoal h2, .surface-charcoal h3, .surface-charcoal p { color: var(--fg-inverse); }