/* =========================================================
   Shadowbox — Colors & Typography
   Interior visual design studio · monochrome, editorial
   ========================================================= */

/* ---- Webfonts (DM Sans + DM Mono — substituted for Aeonik per client) ---- */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   1. COLORS
   ---------------------------------------------------------
   Shadowbox is essentially monochrome. The brand voice is
   "shadow on a white wall" — black wordmark on white paper.
   Imagery carries the warmth (oak, taupe, putty); the
   palette stays disciplined.
   ========================================================= */
:root {
  /* Core mono — paper & ink */
  --sb-paper:        #FFFFFF;     /* canvas — galleries, presentation white */
  --sb-paper-warm:   #FAF8F5;     /* the off-white in moodboards / IG frames */
  --sb-bone:         #F0EBE3;     /* warm putty, used in plans / soft sections */
  --sb-stone:        #D6CFC4;     /* taupe accent, drawn from interiors */
  --sb-ash:          #9A9590;     /* mid-grey (slagschaduw / drop shadow tone) */
  --sb-graphite:     #3A3835;     /* almost-black with warmth */
  --sb-ink:          #111111;     /* the wordmark black */
  --sb-void:         #000000;     /* hard black, used sparingly */

  /* Interior accents — drawn from rendered scenes */
  --sb-oak:          #B89572;     /* warm oak / brass tone */
  --sb-clay:         #8C6A4F;     /* deeper wood */
  --sb-sage:         #7A8475;     /* muted green-grey */
  --sb-slate-blue:   #6B7C8A;     /* moody bedroom blue-grey */
  --sb-terracotta:   #B4715A;     /* rare pop, used in plan keys */

  /* Functional / state */
  --sb-line:         #E5E1DA;     /* hairline rules on paper */
  --sb-line-strong:  #1A1A1A;     /* signature 1px black rule */
  --sb-shadow-soft:  rgba(17,17,17,0.06);
  --sb-shadow-cast:  rgba(17,17,17,0.18);   /* "slagschaduw" — drop shadow */

  /* Semantic — fg / bg / accents */
  --sb-fg:           var(--sb-ink);
  --sb-fg-muted:     var(--sb-ash);
  --sb-fg-soft:      var(--sb-graphite);
  --sb-bg:           var(--sb-paper);
  --sb-bg-warm:      var(--sb-paper-warm);
  --sb-bg-inverse:   var(--sb-ink);
  --sb-fg-inverse:   var(--sb-paper);
  --sb-accent:       var(--sb-oak);
  --sb-rule:         var(--sb-line-strong);

  /* =======================================================
     2. TYPE — DM Sans (display + body) + DM Mono (caption,
     numerics, plan callouts). Wordmark uses wide tracking,
     lowercase always.
     ======================================================= */
  --sb-font-sans:    "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sb-font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sb-font-display: var(--sb-font-sans);

  /* Type scale — editorial, generous */
  --sb-fs-xs:    11px;
  --sb-fs-sm:    13px;
  --sb-fs-base:  15px;
  --sb-fs-md:    17px;
  --sb-fs-lg:    22px;
  --sb-fs-xl:    32px;
  --sb-fs-2xl:   48px;
  --sb-fs-3xl:   72px;
  --sb-fs-4xl:   112px;

  /* Line heights */
  --sb-lh-tight: 1.02;
  --sb-lh-snug:  1.18;
  --sb-lh-body:  1.55;
  --sb-lh-loose: 1.72;

  /* Letter spacing — wordmark style is wide */
  --sb-tracking-tight:  -0.02em;
  --sb-tracking-normal: 0em;
  --sb-tracking-wide:   0.06em;
  --sb-tracking-wider:  0.18em;       /* captions / nav */
  --sb-tracking-mark:   0.32em;       /* the "s h a d ⌬ w b o x" feel */

  /* Weights */
  --sb-w-light:    300;
  --sb-w-regular:  400;
  --sb-w-medium:   500;
  --sb-w-semibold: 600;
  --sb-w-bold:     700;

  /* =======================================================
     3. SPACING / RADII / SHADOWS
     ======================================================= */
  --sb-space-1:  4px;
  --sb-space-2:  8px;
  --sb-space-3:  12px;
  --sb-space-4:  16px;
  --sb-space-5:  24px;
  --sb-space-6:  32px;
  --sb-space-7:  48px;
  --sb-space-8:  64px;
  --sb-space-9:  96px;
  --sb-space-10: 144px;

  /* Radii — kept square. Shadowbox is architectural; rounded corners are rare. */
  --sb-radius-0:  0px;
  --sb-radius-1:  2px;
  --sb-radius-2:  4px;
  --sb-radius-pill: 999px;

  /* Borders */
  --sb-border-hair:  1px solid var(--sb-line);
  --sb-border-rule:  1px solid var(--sb-line-strong);

  /* Shadows — the "slagschaduw" / cast shadow is the brand. */
  --sb-shadow-1: 0 1px 2px rgba(17,17,17,0.04);
  --sb-shadow-2: 0 8px 24px rgba(17,17,17,0.08);
  --sb-shadow-cast: 6px 8px 0 rgba(17,17,17,0.12);   /* offset, no blur — a real shadow */
  --sb-shadow-frame: 0 24px 60px rgba(17,17,17,0.14);

  /* Page rhythm */
  --sb-content-max: 1200px;
  --sb-frame-pad:   clamp(20px, 4vw, 64px);
}

/* =========================================================
   SEMANTIC TYPE STYLES
   --------------------------------------------------------
   Use these like utilities. `sb-display`, `sb-h1`, etc.
   ========================================================= */
.sb-base, body.sb-body {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-base);
  line-height: var(--sb-lh-body);
  color: var(--sb-fg);
  background: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — for titles, hero pages */
.sb-display {
  font-family: var(--sb-font-display);
  font-size: var(--sb-fs-4xl);
  font-weight: var(--sb-w-light);
  line-height: var(--sb-lh-tight);
  letter-spacing: var(--sb-tracking-tight);
  color: var(--sb-fg);
}

/* Wordmark — the lowercase, wide-tracked treatment used in the corner of imagery */
.sb-wordmark {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-md);
  font-weight: var(--sb-w-regular);
  letter-spacing: var(--sb-tracking-mark);
  text-transform: lowercase;
  color: var(--sb-fg);
}

.sb-h1 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-fs-3xl);
  font-weight: var(--sb-w-light);
  line-height: var(--sb-lh-tight);
  letter-spacing: var(--sb-tracking-tight);
}
.sb-h2 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-fs-2xl);
  font-weight: var(--sb-w-light);
  line-height: var(--sb-lh-snug);
  letter-spacing: var(--sb-tracking-tight);
}
.sb-h3 {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-xl);
  font-weight: var(--sb-w-medium);
  line-height: var(--sb-lh-snug);
  letter-spacing: -0.005em;
}
.sb-h4 {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-lg);
  font-weight: var(--sb-w-medium);
  line-height: 1.3;
}

.sb-lede {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-md);
  font-weight: var(--sb-w-light);
  line-height: var(--sb-lh-loose);
  color: var(--sb-fg-soft);
  text-wrap: pretty;
  max-width: 56ch;
}

.sb-body {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-base);
  line-height: var(--sb-lh-body);
  color: var(--sb-fg);
  text-wrap: pretty;
}

.sb-small {
  font-size: var(--sb-fs-sm);
  line-height: 1.5;
  color: var(--sb-fg-soft);
}

/* Eyebrow / caption — uppercase, wide-tracked, mono */
.sb-eyebrow {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-xs);
  font-weight: var(--sb-w-regular);
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wider);
  color: var(--sb-fg-muted);
}

.sb-caption {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-xs);
  letter-spacing: var(--sb-tracking-wide);
  color: var(--sb-fg-muted);
}

.sb-mono {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-sm);
  letter-spacing: 0;
}

/* Quote — stylistic */
.sb-quote {
  font-family: var(--sb-font-sans);
  font-style: italic;
  font-weight: var(--sb-w-light);
  font-size: var(--sb-fs-xl);
  line-height: 1.35;
  color: var(--sb-fg);
  max-width: 28ch;
}

/* Section header — used for page-level dividers */
.sb-section-label {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wider);
  color: var(--sb-fg);
  border-top: 1px solid var(--sb-line-strong);
  padding-top: 12px;
}