@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Lato:wght@300;400;700&display=swap');

:root, :root[data-theme='dark'] {
  --brand-obsidian:    #2A2E36;
  --brand-shimmer:     #4B4E56;
  --brand-copper:      #D2926A;
  --brand-copper-warm: #B8784E;
  --brand-linen:       #F5EFE6;
  --brand-cobalt:      #00374C;

  --bg-base:        #1B1E25;
  --bg-surface-1:   #2A2E36;
  --bg-surface-2:   #333740;
  --bg-surface-3:   #3D414B;

  --text-primary:   #F5EFE6;
  --text-secondary: #D7D1C4;
  --text-tertiary:  #B8BCC4;
  --text-faint:     #909299;

  --status-ok:   #6FB89C;
  --status-warn: #E8B664;
  --status-crit: #C8624D;

  --focus-ring: 0 0 0 2px var(--brand-copper);

  --track-cinematic: 0.32em;
  --track-eyebrow:   0.18em;
  --track-label:     0.12em;
  --track-tab:       0.08em;

  --radius-tight:   4px;
  --radius-default: 8px;
  --radius-large:   12px;
  --radius-full:    999px;

  --pattern-url: url('/shell/assets/world-window.svg');
  --pattern-opacity: 0.05;
  --pattern-blend: screen;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Lato', system-ui, sans-serif;
}

:root[data-theme='light'] {
  --bg-base:        #F5EFE6;
  --bg-surface-1:   #FFFFFF;
  --bg-surface-2:   #EFE7D8;
  --bg-surface-3:   #E5DCC9;

  --text-primary:   #2A2E36;
  --text-secondary: #4B4E56;
  --text-tertiary:  #6B6E76;
  --text-faint:     #8B8E96;

  --pattern-opacity: 0.035;
  --pattern-blend: multiply;
  --focus-ring: 0 0 0 2px var(--brand-copper-warm);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--pattern-url);
  background-size: 240px;
  opacity: var(--pattern-opacity);
  mix-blend-mode: var(--pattern-blend);
  z-index: 0;
}

#app { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-default);
}