/* ============================================================
   TONELLI PRINTS — Colors & Typography
   ------------------------------------------------------------
   Warm, earthy, professional. Espresso on cream.
   Inspired by clay, kraft paper, walnut, and PLA filament.
   ============================================================ */

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

:root {
  /* -----------------------------------------------------------
     CORE PALETTE
     The brand lives on espresso brown over warm parchment cream.
     ----------------------------------------------------------- */

  /* Espresso — the primary "ink" color. Used for logo, text,
     primary surfaces, buttons. Sampled from the Tonelli wordmark. */
  --espresso-900: #2A1F12;   /* deepest, sparing use */
  --espresso-800: #3C2E1F;   /* PRIMARY — matches logo */
  --espresso-700: #4E3D2A;
  --espresso-600: #6B563E;
  --espresso-500: #8A7359;

  /* Cream — the primary background color. The brand "paper". */
  --cream-50:  #FAF7F0;      /* lightest, near-white */
  --cream-100: #F4EFE3;      /* PRIMARY BG — page background */
  --cream-200: #ECE5D3;      /* card / panel tint */
  --cream-300: #E0D6BD;      /* divider / soft surface */
  --cream-400: #C9BC9D;      /* muted line / outline */

  /* Terracotta — the warm accent. Used sparingly: CTAs, highlights,
     hot-extruder energy. Sampled from PLA filament tones. */
  --terracotta-600: #B85C38;
  --terracotta-500: #C77150; /* PRIMARY ACCENT */
  --terracotta-400: #D88A6B;
  --terracotta-200: #EFC8B3;

  /* Olive — secondary accent. Used for tags, calm callouts.
     Evokes Tuscan landscape, natural materials. */
  --olive-700: #5A5736;
  --olive-500: #7A7548;
  --olive-300: #B5B084;

  /* Brick — deepest accent. Reserved for emphasis on dark surfaces. */
  --brick-700: #7A2E1C;
  --brick-500: #A1432A;

  /* Semantic neutrals (NEVER pure black/white — always tinted warm) */
  --ink:       var(--espresso-800);
  --paper:     var(--cream-100);
  --paper-alt: var(--cream-200);
  --hairline:  var(--cream-300);
  --rule:      var(--cream-400);

  /* -----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ----------------------------------------------------------- */
  --bg:           var(--cream-100);
  --bg-elevated:  var(--cream-50);
  --bg-sunken:    var(--cream-200);
  --bg-inverse:   var(--espresso-800);

  --fg:           var(--espresso-800);   /* primary text */
  --fg-muted:     var(--espresso-600);   /* secondary text */
  --fg-subtle:    var(--espresso-500);   /* tertiary, captions */
  --fg-inverse:   var(--cream-100);      /* text on dark */

  --border:       var(--cream-300);
  --border-strong:var(--cream-400);
  --border-ink:   var(--espresso-800);

  --accent:       var(--terracotta-500);
  --accent-hover: var(--terracotta-600);
  --accent-soft:  var(--terracotta-200);

  --success: #5A7A3E;
  --warning: #B8893A;
  --danger:  var(--brick-500);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */
  /* Display: chunky Egyptian slab, echoes the TONELLI wordmark.
     Zilla Slab is the closest free match (the wordmark itself
     appears to be a custom or commercial slab — see README).  */
  --font-display: 'Zilla Slab', 'Roboto Slab', 'Rockwell', Georgia, serif;

  /* Body: warm humanist sans. Manrope reads professional but
     soft — important for B2B that still touches the heart. */
  --font-body:    'Manrope', 'Avenir Next', system-ui, -apple-system, sans-serif;

  /* Mono: for specs, dimensions, filenames. */
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — modular, 1.250 (major third) */
  --text-xs:   0.75rem;   /* 12px — labels, meta */
  --text-sm:   0.875rem;  /* 14px — caption, fine print */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — large body, lead */
  --text-lg:   1.375rem;  /* 22px — small heading */
  --text-xl:   1.75rem;   /* 28px — H3 */
  --text-2xl:  2.25rem;   /* 36px — H2 */
  --text-3xl:  3rem;      /* 48px — H1 */
  --text-4xl:  4rem;      /* 64px — display */
  --text-5xl:  5.5rem;    /* 88px — hero */

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.015em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.18em;   /* uppercase eyebrows */

  /* -----------------------------------------------------------
     SPACING & RADII
     ----------------------------------------------------------- */
  --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;

  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  24px;
  --radius-pill: 999px;
  --radius-blob: 42% 58% 53% 47% / 55% 45% 55% 45%; /* organic mark-style */

  /* -----------------------------------------------------------
     SHADOWS — soft, warm-tinted. Never pure black.
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(60, 46, 31, 0.08);
  --shadow-sm: 0 2px 6px rgba(60, 46, 31, 0.10);
  --shadow-md: 0 6px 18px -4px rgba(60, 46, 31, 0.14);
  --shadow-lg: 0 18px 40px -10px rgba(60, 46, 31, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 252, 245, 0.4);

  /* 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: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes instead of inline font-size where possible.
   ============================================================ */

.t-hero,
h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg);
  text-wrap: balance;
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.t-h4, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: -0.005em;
  color: var(--fg);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  text-wrap: pretty;
}

.t-small, small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-subtle);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-mono, code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg);
}

/* Italic editorial accent — used for callouts, quotes */
.t-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--espresso-700);
}