/* ==========================================================================
   NÜDO Studio — Foundations
   Colors, type, spacing, motion. All design files should pull from this.
   --------------------------------------------------------------------------
   Imports the brand fonts from Google Fonts (substitutes — see README).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Italiana&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap");

:root {
  /* ─────────────── COLOR — Core palette ─────────────── */
  /* The five brand colors, taken directly from the brand identity board. */
  --carbon:       #0D0D0D;  /* Carbon Matte Black — primary dark */
  --sand:         #E7DED1;  /* Warm Sand / Cream — primary light */
  --clay:         #B28E72;  /* Earthy Clay — warm neutral accent */
  --sage:         #5C6B5A;  /* Sage / Forest Green — quiet accent */
  --champagne:    #C5A574;  /* Logo champagne / brushed brass — used sparingly */

  /* ─────────────── COLOR — Extended tonal scale ─────────────── */
  /* Tints/shades for surfaces, hairlines, dividers. Never invent ad-hoc colors. */
  --carbon-95:    #1A1A1A;
  --carbon-85:    #262624;
  --carbon-65:    #4A4945;
  --carbon-45:    #767472;
  --carbon-25:    #B5B3B0;

  --sand-98:      #F2EDE4;  /* lightest cream — page backgrounds */
  --sand-soft:    #EDE6DA;
  --sand-deep:    #D9CFC0;  /* hover/pressed on sand surfaces */
  --bone:         #F7F4EE;  /* near-white, paper feel */

  --clay-soft:    #C9A88E;
  --clay-deep:    #8E6E55;

  --sage-soft:    #7A8A78;
  --sage-deep:    #3F4B3E;

  /* ─────────────── COLOR — Semantic ─────────────── */
  /* Use these in components instead of raw palette names where possible. */
  --bg:           var(--sand-98);
  --bg-elevated:  var(--bone);
  --bg-inverse:   var(--carbon);

  --fg:           var(--carbon);
  --fg-soft:      var(--carbon-65);
  --fg-muted:     var(--carbon-45);
  --fg-faint:     var(--carbon-25);
  --fg-inverse:   var(--sand);
  --fg-on-dark:   var(--sand);
  --fg-on-dark-muted: #8E8A82;

  --accent:       var(--champagne);
  --accent-warm:  var(--clay);
  --accent-cool:  var(--sage);

  --hairline:     rgba(13, 13, 13, 0.12);
  --hairline-soft:rgba(13, 13, 13, 0.06);
  --hairline-on-dark: rgba(231, 222, 209, 0.18);

  /* ─────────────── TYPE — Families ─────────────── */
  /* Brand specifies Canela Light + Across (display) and Neue Haas Grotesk
     Display Pro (body). We substitute free Google Fonts — see README.
       Canela        → Cormorant Garamond (warm, slightly old-style serif)
       Across        → Italiana            (high-contrast didone, all-caps)
       Neue Haas GD  → Hanken Grotesk      (neutral grotesk, near-Helvetica) */
  --font-display: "Cormorant Garamond", "Canela", "Cardo", Georgia, serif;
  --font-eyebrow: "Italiana", "Across", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Hanken Grotesk", "Neue Haas Grotesk Display Pro",
                  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─────────────── TYPE — Scale (clamped, fluid) ─────────────── */
  --fs-display-1: clamp(56px, 7.5vw, 128px);
  --fs-display-2: clamp(44px, 5.6vw, 88px);
  --fs-display-3: clamp(36px, 4.2vw, 64px);
  --fs-h1:        clamp(36px, 4vw, 56px);
  --fs-h2:        clamp(28px, 3vw, 40px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-l:    18px;
  --fs-body:      16px;
  --fs-body-s:    14px;
  --fs-eyebrow:   11px;
  --fs-caption:   12px;

  /* ─────────────── TYPE — Weights / leading / tracking ─────────────── */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:     1.04;
  --lh-snug:      1.18;
  --lh-normal:    1.5;
  --lh-loose:     1.7;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* eyebrows, labels */
  --tracking-widest:  0.32em;   /* logotype-style "S T U D I O" */

  /* ─────────────── SPACING ─────────────── */
  /* 4px base. Use these instead of arbitrary px. */
  --space-0:    0;
  --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;
  --space-11:   192px;

  --gutter:     32px;
  --container:  1280px;
  --container-narrow: 880px;

  /* ─────────────── RADII ─────────────── */
  /* The brand is architectural and minimal. Corners stay SHARP. */
  --radius-0:   0;
  --radius-1:   2px;   /* hairline rounding on inputs only */
  --radius-2:   4px;   /* small chips */
  --radius-pill: 999px; /* pill buttons (used sparingly) */

  /* ─────────────── BORDERS ─────────────── */
  --border-hairline:   1px solid var(--hairline);
  --border-hairline-soft: 1px solid var(--hairline-soft);
  --border-strong:     1px solid var(--carbon);
  --border-on-dark:    1px solid var(--hairline-on-dark);

  /* ─────────────── SHADOWS / ELEVATION ─────────────── */
  /* Soft, long, low-contrast — like daylight on plaster. No harsh drop shadows. */
  --shadow-0:     none;
  --shadow-1:     0 1px 2px rgba(13, 13, 13, 0.04),
                  0 1px 1px rgba(13, 13, 13, 0.03);
  --shadow-2:     0 8px 24px rgba(13, 13, 13, 0.06),
                  0 2px 6px rgba(13, 13, 13, 0.04);
  --shadow-3:     0 24px 60px rgba(13, 13, 13, 0.10),
                  0 8px 20px rgba(13, 13, 13, 0.06);
  --shadow-press: inset 0 1px 0 rgba(13, 13, 13, 0.08);
  --shadow-emboss:0 1px 0 rgba(255, 255, 255, 0.6),
                  0 -1px 0 rgba(13, 13, 13, 0.08);

  /* ─────────────── MOTION ─────────────── */
  /* Slow, weighted, never bouncy. Matches the gravity of stone and plaster. */
  --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1);    /* gentle out */
  --ease-in:      cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     640ms;
  --dur-curtain:  1200ms;  /* full-bleed image reveals */
}

/* =================================================================
   Semantic typography utilities — use these instead of repeating
   font-family/size on every selector.
   ================================================================= */
.display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.display-3 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-soft);
}
.wordmark {
  font-family: var(--font-eyebrow);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}
p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-soft);
  margin: 0;
  text-wrap: pretty;
}
.body-l {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
  color: var(--fg-soft);
}
.body-s, small {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}
.quote, blockquote {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Base reset for design-system demo pages */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}