/* ═══════════════════════════════════════════════════════
   HAVEN DYNAMICS — BASE STYLESHEET
   Loaded first on every page. Contains:
     1. @font-face declarations
     2. CSS custom properties (:root)
     3. Reset
     4. Scrollbar
     5. .bg-grid utility
   Page-specific CSS files only need their own layout
   and component styles — never fonts or variables.
═══════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────── */
@font-face {
  font-family: 'HDLargeFont';
  src: url('/static/fonts/HAVENV3.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HDSmallFont';
  src: url('/static/fonts/InterVariable.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* Weight variants of HDSmallFont (same variable font, different weights) */
@font-face {
  font-family: 'HDSmallFontSmall';
  src: url('/static/fonts/InterVariable.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'HDSmallFontMini';
  src: url('/static/fonts/InterVariable.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'HDSmallFontLittle';
  src: url('/static/fonts/InterVariable.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ── Design Tokens ──────────────────────────────────── */
:root {
  /* Core palette */
  --bg:      #0A0C0E;
  --text:    #ECEFF1;
  --accent:  #7A6A45;
  --amber:   #ffb300;
  --danger:  #ff3d3d;
  --muted:   #C9CED1;

  /* Misc */
  --grid-offset: 0px;

  /* Font families */
  --f-head: 'HDLargeFont';
  --f-body: 'HDSmallFont';
  --f-mono: 'HDSmallFontSmall';

  /* Legacy aliases — so existing pages don't break during transition */
  --main-bg:   #0A0C0E;
  --main-text: #ECEFF1;
  --highlight: #7A6A45;
  --line:      #7A6A45;
  --ink:       #0A0C0E;

  /* Component tokens — default to the core palette above; a page that
     needs a different look (e.g. cart.css on the white-background cart
     page) overrides these in its own stylesheet rather than editing this
     shared file. Custom properties cascade normally, so an override
     scoped to that page's body class only ever affects that page. */
  --header-text: var(--main-text);
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  overflow-x: hidden;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

input, textarea, select { font-family: inherit; font-size: inherit; }

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); }

/* ── Grid background utility ────────────────────────── */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.155) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0px var(--grid-offset, 0px);
}