/* ============================================================
   M-D Stukadoorswerken — Design Tokens
   Colors, typography, and semantic style variables.
   ============================================================ */

/* Inter — local brand files (variable font, weights 100–900) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
}

/* DM Serif Display — local brand files */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMSerifDisplay-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMSerifDisplay-Italic.ttf") format("truetype");
}

:root {
  /* ---------- COLOR PALETTE ---------- */

  /* Terracotta — primary accent (warm clay, fired earth) */
  --terracotta-400: #e07b54;
  --terracotta-500: #c9643d; /* Brand primary */
  --terracotta-600: #a84f2d;
  --terracotta-700: #8a4027;

  /* Stone — neutrals for text & dark surfaces */
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524; /* Headings, dark backgrounds */

  /* Sand — warm off-white backgrounds */
  --sand-50:  #fdfcfa;
  --sand-100: #f9f6f1;
  --sand-200: #f0ebe0;
  --sand-300: #e4dccb;
  --sand-400: #d4c9b0;
  --sand-500: #bfad8f;

  /* Pure */
  --white: #ffffff;

  /* Semantic status (used sparingly) */
  --success: #22c55e;
  --warning: #eab308;
  --danger:  #ef4444;

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg-page:        var(--sand-50);
  --bg-surface:     var(--white);
  --bg-muted:       var(--sand-100);
  --bg-sunken:      var(--sand-200);
  --bg-inverse:     var(--stone-800);

  --fg-primary:     var(--stone-800);   /* Headings, key text */
  --fg-secondary:   var(--stone-700);   /* Body */
  --fg-tertiary:    var(--stone-600);   /* Subtle body */
  --fg-muted:       var(--stone-500);   /* Labels, captions */
  --fg-on-inverse:  var(--sand-100);
  --fg-accent:      var(--terracotta-500);

  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--sand-400);

  --accent:         var(--terracotta-500);
  --accent-hover:   var(--terracotta-600);
  --accent-pressed: var(--terracotta-700);

  /* ---------- FONT FAMILIES ---------- */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display: 72px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;

  --lh-tight:    1.1;   /* Display, H1 */
  --lh-snug:     1.2;   /* H2, H3 */
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;  /* Body */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;  /* Labels */

  /* ---------- SPACING (4-pt grid) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(41, 37, 36, 0.04);
  --shadow-sm: 0 1px 3px rgba(41, 37, 36, 0.06), 0 1px 2px rgba(41, 37, 36, 0.04);
  --shadow-md: 0 4px 12px rgba(41, 37, 36, 0.06), 0 1px 3px rgba(41, 37, 36, 0.04);
  --shadow-lg: 0 4px 20px -4px rgba(41, 37, 36, 0.08), 0 1px 3px rgba(41, 37, 36, 0.04);
  --shadow-xl: 0 16px 32px -8px rgba(41, 37, 36, 0.12), 0 4px 8px -2px rgba(41, 37, 36, 0.04);

  /* Branded glow for terracotta buttons */
  --shadow-accent: 0 4px 12px rgba(201, 100, 61, 0.3);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* Display & headings — DM Serif Display */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

/* Body & UI — Inter */
.t-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.t-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}

/* Eyebrow / kicker label — uppercase, tracked */
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Italic accent — used for emphasized words in display headings */
.t-italic-accent {
  font-style: italic;
  color: var(--terracotta-500);
}