:root {
  --color-base: #0F0E0C; --color-surface: #1A1816; --color-elevated: #242220;
  --color-border: #2E2B28; --color-border-hover: #3D3935;
  --color-primary: #F5F0E8; --color-secondary: #C8C0B4; --color-tertiary: #8C8478; --color-quaternary: #5C5650;
  --color-accent: #E8A230; --color-accent-hover: #D4922A;
  --color-green: #34D399; --color-red: #EF4444;
  --radius-lg: 12px; --radius-xl: 16px;
  --shadow-focus: 0 0 0 3px rgba(232, 162, 48, 0.15);
}
*:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
::selection { background: rgba(232, 162, 48, 0.25); color: var(--color-primary); }
.text-display { font-size: clamp(32px, 5vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-primary); }
.text-title { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--color-primary); }
.text-heading { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-primary); }
.btn-primary { background: var(--color-accent); color: var(--color-base); border-radius: var(--radius-lg); padding: 0.625rem 1.25rem; font-weight: 500; font-size: 0.875rem; transition: background 150ms; }
.btn-primary:hover { background: var(--color-accent-hover); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.25rem; transition: border-color 150ms; }
.card:hover { border-color: var(--color-border-hover); }