/* ============================================================
   CAPELY: design tokens
   The only file allowed to define a colour. Every other
   stylesheet references these. Values sampled from the owner's
   logo pixels: #14171C plate, #F3F5F6 wordmark, #3FD1A6 tail.
   ============================================================ */

/* ---------- fonts, self-hosted ----------
   Served from vendor/fonts/ so loading a page sends nothing to Google.
   Both files are variable fonts (verified fvar+gvar), so one file per
   subset covers every weight in its range: Outfit 600-800 for headings,
   Plus Jakarta Sans 400-600 for body copy. Unicode ranges are Google's
   own latin/latin-ext splits; characters outside them fall back to the
   system stack, which the site's English copy never reaches. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../vendor/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../vendor/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../vendor/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../vendor/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- mint scale, built around the brand accent ---------- */
  --mint-100: #D8F6EC;
  --mint-200: #A9EBD7;
  --mint-300: #74DFC0;
  --mint-400: #3FD1A6;   /* THE brand accent */
  --mint-500: #2FB891;
  --mint-600: #229277;
  --mint-700: #176B58;

  --accent:        var(--mint-400);
  --accent-strong: var(--mint-500);
  --accent-dim:    var(--mint-600);
  /* Text/icons placed ON an accent fill. The mint is light, so this is the dark
     plate, never white: white on mint measures about 1.9:1 and is unreadable. */
  --on-accent: #0B1A15;

  /* ---------- ink and surfaces ---------- */
  --base:      #14171C;   /* the page */
  --base-deep: #101318;   /* wells, footer, insets */
  /* The nav island and its mobile drawer only. Velocity's own nav fill
     (velocity-web/css/theme.css --bg-1), deeper than --base-deep so the bar
     reads as chrome sitting over the page rather than a panel cut out of it. */
  --nav-fill:  #0A0E16;
  --surface:   #171B21;   /* cards, panels */
  --surface-2: #1C2129;   /* raised card, hover, inputs */
  --surface-3: #232932;   /* pressed, selected */

  --hairline:        rgba(255, 255, 255, .075);
  --hairline-strong: rgba(255, 255, 255, .135);

  /* ---------- night sky, backdrop only ----------
     Minecraft's night sky, pulled down to sit under Capely's ink. It is a real
     blue, because a neutral grey sky is not a sky and the whole point of the
     backdrop is that a visitor reads it as the game at night rather than as a
     slightly lighter panel. This is NOT a second accent and section 2's
     one-accent rule still stands: only the fixed backdrop layers in site.css
     may name this token, and nothing on the page itself ever does.

     --bg-night-2 is the same sky one step down, so the gradient has a middle
     and does not run straight from blue to ink in a single visible band. */
  --bg-night:   #141C31;
  --bg-night-2: #151A25;

  /* Accent-tinted edge and light, for the hover state of anything that is a
     product: a cape card, a partner. Kept here rather than written inline so
     one value changes every glow on the site, and so nothing outside this file
     carries a colour literal. */
  --accent-line:  rgba(63, 209, 166, .34);
  --glow-mint:    rgba(63, 209, 166, .55);

  /* The house card wash. A flat white film over near-black turns grey, so cards
     get a whisper of the accent from the top instead of more white. */
  --card-wash: linear-gradient(180deg, rgba(63, 209, 166, .045), transparent 42%);

  /* ---------- text ----------
     Every value here clears WCAG AA on --base. --text-mute carries captions and
     small print, so it is the token that decides whether the fine print is
     legible; it is deliberately lighter than it looks like it needs to be. */
  --text:       #F3F5F6;   /* 15.9:1 */
  --text-dim:   #AFB8C2;   /*  8.2:1  body copy on a dark card */
  --text-mute:  #7C8794;   /*  4.6:1  captions, labels, hints */
  /* Decoration only: separators, disabled controls, placeholder glyphs.
     Never put real copy on this token. */
  --text-faint: #49515C;

  /* ---------- status. Never used as decoration. ---------- */
  --ok:     #3FD1A6;
  --warn:   #E8B94A;
  --danger: #E8685F;

  /* ---------- rarity, game-loot convention ----------
     Four tiers, matching data/products.json "rarity" strings exactly. These are
     product metadata, not UI chrome: they may tint a rarity tag and nothing
     else. Buttons, links and focus rings stay on --accent. Each --*-ink pairs
     with its --*-bg/--*-line at AA on the card surface. */
  --rarity-common-ink:  #A8B2BF;
  --rarity-common-bg:   rgba(168, 178, 191, .10);
  --rarity-common-line: rgba(168, 178, 191, .26);

  --rarity-uncommon-ink:  #4ADE80;
  --rarity-uncommon-bg:   rgba(74, 222, 128, .10);
  --rarity-uncommon-line: rgba(74, 222, 128, .30);

  --rarity-rare-ink:  #55A8FF;
  --rarity-rare-bg:   rgba(85, 168, 255, .12);
  --rarity-rare-line: rgba(85, 168, 255, .32);

  --rarity-ultra-ink:  #B57BF7;
  --rarity-ultra-bg:   rgba(181, 123, 247, .13);
  --rarity-ultra-line: rgba(181, 123, 247, .34);

  /* ---------- radii ---------- */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-pill: 999px;

  /* ---------- elevation. Deep and soft, never a coloured glow. ---------- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);
  --shadow-md: 0 14px 40px -22px rgba(0, 0, 0, .9);
  --shadow-lg: 0 34px 80px -34px rgba(0, 0, 0, .95);

  /* ---------- motion ---------- */
  --e-out:    cubic-bezier(.22, 1, .36, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .16s;
  --t:      .28s;
  --t-slow: .48s;

  /* ---------- layout ---------- */
  --maxw:      1160px;
  --maxw-mid:  1040px;
  --maxw-text:  760px;
  --gutter:     24px;
  --nav-h:      72px;
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
}

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

html {
  background: var(--base);
  -webkit-text-size-adjust: 100%;
  /* Smooth scrolling is not enabled via CSS `scroll-behavior`. js/site.js
     drives scrolling; the two together produce a visible double animation
     on every anchor click. */
}

body {
  background: var(--base);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .wm {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* One focus treatment for the whole site. Keyboard only, so a mouse click on a
   button does not leave a ring behind it. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: rgba(63, 209, 166, .26); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--base); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); border: 3px solid var(--base); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }