/* tokens.css
   Every colour, font, size and spacing value lives here.
   Change a value here and it changes everywhere.
   Dark theme only for now. */

:root {
  /* Colour: warm charcoal with a gold accent */
  --bg: #151412;
  --surface-1: #1d1c19;
  --surface-2: #262420;
  --border: #35322b;
  --border-strong: #4a463c;
  --text: #f3eee2;
  --text-2: #b0a999;
  --text-muted: #7a7466;

  --accent: #c9971a;
  --accent-contrast: #17130a;
  --accent-soft: rgba(201, 151, 26, 0.14);
  --accent-line: rgba(201, 151, 26, 0.45);

  --success: #6dbb85;
  --success-soft: rgba(109, 187, 133, 0.14);
  --warning: #e48a3b;
  --warning-soft: rgba(228, 138, 59, 0.14);
  --danger: #e2685f;
  --danger-soft: rgba(226, 104, 95, 0.14);

  /* Type: swap the two families here to restyle the whole app */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-hero: 2.5rem;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layout */
  --tap: 44px;
  --nav-height: 64px;
  --rail-width: 76px;
  --narrow: 440px;
  --wide: 1100px;

  /* Safe areas (phone notches and home bars) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}