/* ============================================================
   Ciertto Design System — Colors & Type Tokens
   ============================================================
   Warm, earthy palette — cacao, mustard, sand, bone, sage, forest, ink.
   Variable-font weight stops are the core hierarchy mechanism.
   ============================================================ */

/* -- Fonts: Noto Serif (headings) + Noto Sans (body) -- */
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-Variable.woff2') format('woff2-variations'),
       url('fonts/NotoSans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif';
  src: url('fonts/NotoSerif-Variable.woff2') format('woff2-variations'),
       url('fonts/NotoSerif-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------
     COLOR — the Ciertto seven
     ------------------------------------------------------------ */
  --cacao:   #542c08;   /* deep brown — primary heavy accent */
  --mustard: #e2b969;   /* warm gold — highlight / CTA alt */
  --sand:    #e5d1b7;   /* light neutral surface */
  --bone:    #f7f7f5;   /* default page background */
  --sage:    #80ad91;   /* soft green accent */
  --forest:  #546b5c;   /* deep green — secondary text / dark surface */
  --ink:     #1c1203;   /* near-black body text */

  /* Legacy aliases retained for components that expect black/white */
  --black: var(--ink);
  --white: var(--bone);

  /* Glass overlays (built from ink + bone) */
  --glass-dark:  rgba(28, 18, 3, 0.08);
  --glass-light: rgba(247, 247, 245, 0.16);

  /* Semantic roles */
  --fg:        var(--ink);
  --fg-muted:  var(--forest);
  --fg-invert: var(--bone);
  --bg:        var(--bone);
  --bg-surface: #ffffff;        /* pure white cards on bone */
  --bg-invert: var(--ink);
  --bg-accent-warm: var(--sand);
  --bg-accent-cool: var(--sage);
  --border:    rgba(28, 18, 3, 0.12);
  --border-strong: var(--ink);
  --focus:     var(--ink);

  /* Hero gradient rebuilt from the palette */
  --hero-gradient: linear-gradient(
    118deg,
    var(--sage)    0%,
    var(--mustard) 30%,
    var(--sand)    58%,
    var(--cacao)  100%
  );

  /* ------------------------------------------------------------
     TYPOGRAPHY — font families
     Headings & display use Noto Serif; body & short text use Noto Sans.
     Mono (for labels) falls back to the system stack.
     ------------------------------------------------------------ */
  --font-serif: 'Noto Serif', 'Iowan Old Style', 'Times New Roman', Georgia, serif;
  --font-sans:  'Noto Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ------------------------------------------------------------
     WEIGHT STOPS — unusual intermediates are the hierarchy mechanism
     ------------------------------------------------------------ */
  --wt-320: 320;
  --wt-330: 330;
  --wt-340: 340;
  --wt-400: 400;
  --wt-450: 450;
  --wt-480: 480;
  --wt-540: 540;
  --wt-700: 700;

  /* ------------------------------------------------------------
     TYPE SCALE — serif for headings, sans for body
     ------------------------------------------------------------ */
  --type-display-family: var(--font-serif);
  --type-display-size:   86px;
  --type-display-weight: var(--wt-400);
  --type-display-lh:     1.02;
  --type-display-ls:     -1.72px;

  --type-h1-size:   64px;
  --type-h1-weight: var(--wt-400);
  --type-h1-lh:     1.10;
  --type-h1-ls:     -0.96px;

  --type-h2-size:   26px;
  --type-h2-weight: var(--wt-540);
  --type-h2-lh:     1.35;
  --type-h2-ls:     -0.26px;
  --type-h2-light-weight: var(--wt-340);

  --type-h3-size:   24px;
  --type-h3-weight: var(--wt-700);
  --type-h3-lh:     1.45;
  --type-h3-ls:     normal;

  --type-body-lg-size:   20px;
  --type-body-lg-weight: var(--wt-330);
  --type-body-lg-lh:     1.40;
  --type-body-lg-ls:     -0.14px;

  --type-body-size:   16px;
  --type-body-weight: var(--wt-330);
  --type-body-lh:     1.45;
  --type-body-ls:     -0.14px;

  --type-body-light-size:   18px;
  --type-body-light-weight: var(--wt-320);
  --type-body-light-lh:     1.45;
  --type-body-light-ls:     -0.26px;

  --type-mono-size:   18px;
  --type-mono-weight: var(--wt-400);
  --type-mono-lh:     1.30;
  --type-mono-ls:     0.54px;

  --type-mono-sm-size:   12px;
  --type-mono-sm-weight: var(--wt-400);
  --type-mono-sm-lh:     1.00;
  --type-mono-sm-ls:     0.6px;

  /* ------------------------------------------------------------
     SPACING — 8px base with unusual intermediates
     ------------------------------------------------------------ */
  --space-0: 0px; --space-px: 1px; --space-2: 2px; --space-4: 4px;
  --space-4h: 4.5px; --space-8: 8px; --space-10: 10px; --space-12: 12px;
  --space-16: 16px; --space-18: 18px; --space-24: 24px; --space-32: 32px;
  --space-40: 40px; --space-46: 46px; --space-48: 48px; --space-50: 50px;

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(28,18,3,0.05), 0 2px 8px rgba(28,18,3,0.05);
  --shadow-2: 0 4px 12px rgba(28,18,3,0.08), 0 12px 32px rgba(28,18,3,0.10);

  /* Focus — dashed signature */
  --focus-outline: 2px dashed var(--ink);
  --focus-offset:  2px;

  --container-max: 1920px;
}

/* ------------------------------------------------------------
   GLOBAL DEFAULTS
   ------------------------------------------------------------ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-ls);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   SEMANTIC TYPE ROLES
   ------------------------------------------------------------ */
.t-display, h1.display {
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-ls);
  margin: 0;
}
.t-h1, h1 {
  font-family: var(--font-serif);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  margin: 0;
}
.t-h2, h2 {
  font-family: var(--font-serif);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  margin: 0;
}
.t-h2-light {
  font-family: var(--font-serif);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-light-weight);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
}
.t-h3, h3 {
  font-family: var(--font-serif);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  margin: 0;
}
.t-body-lg {
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-lh);
  letter-spacing: var(--type-body-lg-ls);
}
.t-body, p {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-ls);
  margin: 0;
}
.t-body-light {
  font-size: var(--type-body-light-size);
  font-weight: var(--type-body-light-weight);
  line-height: var(--type-body-light-lh);
  letter-spacing: var(--type-body-light-ls);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  font-weight: var(--type-mono-weight);
  line-height: var(--type-mono-lh);
  letter-spacing: var(--type-mono-ls);
  text-transform: uppercase;
}
.t-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm-size);
  font-weight: var(--type-mono-sm-weight);
  line-height: var(--type-mono-sm-lh);
  letter-spacing: var(--type-mono-sm-ls);
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   INTERACTIVE PRIMITIVES
   ------------------------------------------------------------ */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 1.5px; }

button {
  font-family: inherit; cursor: pointer; border: none; background: transparent; color: inherit;
  font-feature-settings: "kern" 1;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 18px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--type-body-size);
  font-weight: var(--wt-450);
  letter-spacing: -0.14px;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap; user-select: none;
}
.btn-ink      { background: var(--ink);    color: var(--bone); }
.btn-ink:hover{ background: #2a1d08; }
.btn-bone     { background: var(--bone);   color: var(--ink); }
.btn-bone:hover{ background: #ffffff; }
.btn-cacao    { background: var(--cacao);  color: var(--bone); }
.btn-mustard  { background: var(--mustard);color: var(--ink); }
.btn-sage     { background: var(--sage);   color: var(--ink); }
.btn-glass-dark  { background: var(--glass-dark);  color: var(--ink); }
.btn-glass-light { background: var(--glass-light); color: var(--bone); backdrop-filter: blur(6px); }

.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-circle); }

/* Utilities */
.bg-hero-gradient { background: var(--hero-gradient); }
.bg-sand  { background: var(--sand); }
.bg-bone  { background: var(--bone); }
.bg-ink   { background: var(--ink);   color: var(--bone); }
.bg-cacao { background: var(--cacao); color: var(--bone); }
.bg-sage  { background: var(--sage);  color: var(--ink); }
.bg-forest{ background: var(--forest);color: var(--bone); }