/* =========================================================================
   Anna Art Flow — Design Tokens
   Gallery-white shell. The paintings are the color; the UI stays quiet.
   ========================================================================= */

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

:root {
  /* ---------- Neutral palette (the UI itself) ---------- */
  --paper:        #FAFAF7;   /* page background — warm gallery white */
  --paper-2:      #F3F2EC;   /* subtle section shift */
  --canvas:       #FFFFFF;   /* cards, elevated surfaces */
  --ink:          #111110;   /* primary text, near-black */
  --ink-2:        #3A3A37;   /* body text */
  --ink-3:        #76746D;   /* metadata, captions */
  --ink-4:        #B6B3AA;   /* disabled, hairlines */
  --line:         #E8E4DB;   /* 1px borders */
  --line-strong:  #1A1A1A;   /* heavy rules, wordmark underline */

  /* ---------- Accent (used SPARINGLY — for status, CTAs, links) ---------- */
  --accent:       #1A1A1A;   /* near-black — our default "accent" */
  --accent-ink:   #FAFAF7;   /* text on accent */
  --cobalt:       #1F3FA8;   /* pulled from the blue frame in Anno 2025 */
  --rust:         #A63B2B;   /* pulled from reds in the storm piece */
  --ochre:        #D9A441;   /* pulled from yellows */

  /* ---------- Semantic ---------- */
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-muted:     var(--ink-4);
  --bg-1:         var(--paper);
  --bg-2:         var(--paper-2);
  --bg-elev:      var(--canvas);
  --border:       var(--line);
  --border-strong:var(--line-strong);
  --link:         var(--ink);
  --price:        var(--ink);
  --sold:         var(--ink-3);
  --available:    var(--cobalt);

  /* ---------- Type families ---------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* bold geometric display */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- Type scale (modular, 1.25 ratio above body) ---------- */
  --fs-meta:   11px;
  --fs-caption:13px;
  --fs-body:   16px;
  --fs-lead:   19px;
  --fs-h4:     22px;
  --fs-h3:     30px;
  --fs-h2:     44px;
  --fs-h1:     64px;
  --fs-display:96px;
  --fs-hero:   140px;

  /* ---------- Line heights ---------- */
  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-body:   1.55;
  --lh-loose:  1.75;

  /* ---------- Letter-spacing ---------- */
  --tr-tight:  -0.03em;   /* display */
  --tr-body:   -0.005em;
  --tr-label:  0.12em;    /* uppercase metadata */
  --tr-wide:   0.22em;    /* wordmark, section kickers */

  /* ---------- Spacing (4px 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: 192px;

  /* ---------- Radii (minimal — this system is largely square) ---------- */
  --r-0:  0px;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* ---------- Shadows (almost imperceptible — gallery feel) ---------- */
  --shadow-1: 0 1px 2px rgba(17,17,16,0.04);
  --shadow-2: 0 4px 16px -6px rgba(17,17,16,0.08), 0 1px 2px rgba(17,17,16,0.04);
  --shadow-3: 0 24px 48px -20px rgba(17,17,16,0.16), 0 2px 4px rgba(17,17,16,0.04);
  /* Frame shadow — for hanging artwork on a wall */
  --shadow-frame: 0 32px 64px -24px rgba(0,0,0,0.28), 0 4px 8px rgba(0,0,0,0.08);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:    160ms;
  --t-med:     280ms;
  --t-slow:    520ms;

  /* ---------- Layout ---------- */
  --max-w:     1440px;
  --gutter:    32px;
  --gutter-sm: 20px;
}

/* ========================================================================= */
/* Base reset + typography                                                   */
/* ========================================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / headings — always Space Grotesk, tight tracking */
h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}

.display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 700; }
.hero    { font-size: var(--fs-hero);    line-height: 0.95;          font-weight: 700; letter-spacing: -0.04em; }
h1, .h1  { font-size: var(--fs-h1); }
h2, .h2  { font-size: var(--fs-h2); }
h3, .h3  { font-size: var(--fs-h3); }
h4, .h4  { font-size: var(--fs-h4); font-weight: 500; }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.lead    { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }
.meta    { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-label);
           text-transform: uppercase; color: var(--fg-3); }
.kicker  { font-family: var(--font-display); font-size: var(--fs-meta); letter-spacing: var(--tr-wide);
           text-transform: uppercase; color: var(--fg-3); font-weight: 500; }

a { color: var(--link); text-decoration: none;
    border-bottom: 1px solid currentColor; transition: opacity var(--t-fast) var(--ease-out); }
a:hover { opacity: 0.55; }

hr { border: none; border-top: 1px solid var(--border); margin: var(--s-7) 0; }

/* Selection */
::selection { background: var(--ink); color: var(--paper); }

/* Focus */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Utility: wordmark block */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-size: 14px;
  color: var(--fg-1);
}