/* ============================================================
   DAISHA BOARD GALLERY — Colors & Type Foundations
   Clean, minimal, art-forward. Paper walls, ink type,
   a single restrained clay accent. Let the artwork carry color.
   ============================================================ */

/* ---- Fonts (Google Fonts; Jost ≈ the geometric Futura wordmark) ---- */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&display=swap');

:root {
  /* ---------- BRAND PALETTE (named) ----------
     The six signature gallery colors. Use these as the
     source of truth; semantic tokens below map onto them. */
  --obsidian:   #111111;   /* Obsidian Black — primary text, logo, deep fills */
  --ivory:      #F6F1E8;   /* Gallery Ivory — default wall / canvas */
  --umber:      #4A3328;   /* Burnt Umber — deep warm brown, dark surfaces */
  --champagne:  #D8C5A3;   /* Soft Champagne — warm light accent, plinths */
  --terracotta: #A7634C;   /* Terracotta Blush — primary accent */
  --olive:      #3F4A3C;   /* Gallery Olive — secondary accent, deep green */

  /* ---------- CORE PALETTE (semantic, mapped to brand) ---------- */
  --ink:        #111111;   /* Obsidian — primary text, logo */
  --ink-soft:   #4A3328;   /* Burnt Umber — raised dark fills */
  --paper:      #F6F1E8;   /* Gallery Ivory — default canvas */
  --paper-deep: #EDE4D3;   /* recessed panels, hovers on ivory */
  --white:      #FFFFFF;   /* art mounting / pure surfaces */

  /* ---------- WARM NEUTRAL SCALE (obsidian → umber → champagne → ivory) ---------- */
  --n-900: #111111;
  --n-800: #2A211B;
  --n-700: #4A3328;   /* Burnt Umber */
  --n-600: #6E5848;
  --n-500: #927B64;   /* muted captions / disabled */
  --n-400: #B6A083;
  --n-300: #D8C5A3;   /* Soft Champagne */
  --n-200: #E6DAC2;
  --n-100: #F0E9DB;
  --n-050: #F6F1E8;   /* Gallery Ivory */

  /* ---------- ACCENT (used sparingly) ---------- */
  --clay:        #A7634C;  /* Terracotta Blush — links, focus, small marks */
  --clay-deep:   #8A4D38;  /* pressed / hover-dark */
  --clay-tint:   #ECDFCC;  /* faint champagne wash behind accent chips */

  /* secondary accent */
  --olive-deep:  #313A2F;  /* pressed olive */
  --olive-tint:  #E0E0D2;  /* faint olive wash */
  --champagne-deep: #C8B188; /* hover / pressed champagne */

  /* ---------- SEMANTIC ---------- */
  --bg:          var(--paper);
  --surface:     var(--white);
  --fg1:         var(--ink);      /* primary text */
  --fg2:         var(--n-600);    /* secondary text */
  --fg3:         var(--n-500);    /* tertiary / captions */
  --line:        var(--n-200);    /* hairline borders */
  --line-strong: var(--n-300);
  --accent:      var(--clay);
  --focus:       var(--clay);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:  'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --font-serif: 'Newsreader', 'Georgia', 'Times New Roman', serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ---------- TYPE SCALE (fluid-ish, px) ---------- */
  --t-display:  clamp(48px, 7vw, 92px);
  --t-h1:       clamp(36px, 5vw, 60px);
  --t-h2:       34px;
  --t-h3:       24px;
  --t-h4:       19px;
  --t-body:     17px;
  --t-small:    15px;
  --t-eyebrow:  12px;   /* uppercase, tracked labels */

  /* ---------- TRACKING ---------- */
  --track-eyebrow: 0.22em;
  --track-wordmark: 0.18em;
  --track-tight: -0.01em;

  /* ---------- SPACING (8pt base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  /* ---------- RADII (minimal — gallery favors sharp edges) ---------- */
  --r-0: 0px;     /* default: square, art-frame feel */
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, sparse) ---------- */
  --shadow-sm: 0 1px 2px rgba(23,21,15,0.06);
  --shadow-md: 0 8px 24px rgba(23,21,15,0.08);
  --shadow-lg: 0 24px 60px rgba(23,21,15,0.12);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.45s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.dbg-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.dbg-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

.dbg-h1 { font-family: var(--font-serif); font-weight: 300; font-size: var(--t-h1); line-height: 1.06; letter-spacing: var(--track-tight); color: var(--fg1); }
.dbg-h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.12; color: var(--fg1); }
.dbg-h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; color: var(--fg1); }
.dbg-h4 { font-family: var(--font-sans); font-weight: 500; font-size: var(--t-h4); line-height: 1.3; color: var(--fg1); }

.dbg-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg1);
}
.dbg-ui {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg1);
}
.dbg-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--fg3);
}
.dbg-wordmark {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
}

a.dbg-link { color: var(--clay); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--clay) 35%, transparent); transition: border-color var(--dur) var(--ease); }
a.dbg-link:hover { border-color: var(--clay); }