/* ==========================================================================
   Sky Suites · design tokens
   The one source of colour, type, space, radius and motion for the site.
   site.css (story) and app.css (live panels) use these variables only.

   CSP note for every stylesheet and script: the page ships with
   style-src 'self'. A style="" attribute in markup (or innerHTML) is
   blocked. Set dynamic values with el.style.setProperty('--x', v).
   ========================================================================== */

/* ---- faces (bundled, OFL) ---------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- raw palette: sampled from the room art ---------------------------- */
  /* paper grounds (the flat backdrops behind every room) */
  --paper-cream: #f5efe1;
  --paper-sage: #dae6d3;
  --paper-peach: #fae3d4;
  --paper-sky: #d6e7f3;
  --paper-lilac: #e7e1f4;
  --paper-white: #fcf9f1;
  --paper-shade: #ece4d2;

  /* stone (walls and floor slabs) */
  --stone-1: #dcd2c0;
  --stone-2: #b4aca2;
  --stone-3: #928a80;

  /* ink and night (outline colour, window at night) */
  --ink: #282230;
  --ink-2: #4a4856;
  --ink-3: #5f5a6a;          /* 6.3:1 on paper, still 5:1+ under the header shadow */
  --night-1: #181e42;
  --night-2: #1e203e;
  --night-3: #343a64;
  --night-4: #525a8c;
  --starlight: #fff6c8;

  /* brass, wine, leaf, water */
  --brass: #cea44a;
  --brass-hi: #ecc86e;
  --brass-lo: #9a6f22;
  --wine: #7e2834;
  --wine-hi: #ba6050;
  --wine-lo: #4c1620;
  --leaf: #549850;
  --leaf-lo: #356b3a;
  --pool: #9cc6d8;
  --pool-lo: #2f5d7c;

  /* sky, as the windows paint it */
  --sky-day: #80c2f0;
  --sky-day-haze: #96b2ce;
  --sky-rose: #ec84a0;
  --sky-apricot: #faa868;
  --sky-mauve: #b06880;
  --sky-plum: #684064;

  /* the three hold-streak frames (straight from the overlays) */
  --bronze: #ce7640;
  --bronze-hi: #f6aa70;
  --bronze-lo: #9c5028;
  --bronze-ink: #401e10;
  --silver: #c4c8d4;
  --silver-hi: #f0f2f8;
  --silver-lo: #969caa;
  --silver-ink: #3c404c;
  --gold: #e8ba46;
  --gold-hi: #ffe88c;
  --gold-lo: #be8c28;
  --gold-ink: #5c3e0e;

  /* ---- semantic roles (paper context: the default) ----------------------- */
  --c-page: var(--paper-cream);
  --c-surface: var(--paper-white);      /* cards, panels, table body */
  --c-surface-alt: var(--paper-cream);  /* zebra rows, inset blocks */
  --c-sunken: var(--paper-shade);       /* wells, tracks, skeletons */
  --c-text: var(--ink);
  --c-text-soft: var(--ink-2);
  --c-text-faint: var(--ink-3);
  --c-line: rgb(40 34 48 / 0.14);
  --c-line-strong: rgb(40 34 48 / 0.34);
  --c-edge: var(--ink);                 /* the 2px pixel outline */

  --c-action: var(--ink);               /* primary button fill */
  --c-action-text: var(--paper-cream);
  --c-action-hover: var(--night-3);
  --c-accent: var(--brass);             /* brass trim, highlights */
  --c-accent-text: var(--ink);
  --c-link: var(--wine);

  --c-good: var(--leaf-lo);             /* eligible, claimable, live */
  --c-good-bg: var(--paper-sage);
  --c-freeze: var(--pool-lo);           /* 00:00-00:30 freeze */
  --c-freeze-bg: var(--paper-sky);
  --c-bad: var(--wine);                 /* errors, wrong network */
  --c-bad-bg: var(--paper-peach);
  --c-you-bg: #f4e7bd;                  /* the connected wallet's own row */

  /* ---- type ---------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-micro: 0.6875rem;   /* 11px mono caps labels */
  --fs-xs: 0.75rem;        /* 12px */
  --fs-sm: 0.875rem;       /* 14px */
  --fs-md: 1rem;           /* 16px body */
  --fs-lg: 1.125rem;       /* 18px */
  --fs-lead: clamp(1.0625rem, 0.97rem + 0.4vw, 1.3125rem);
  --fs-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.75rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.7vw, 3.75rem);
  --fs-h1: clamp(2.5rem, 0.9rem + 3.2vw, 4.25rem);
  --fs-numeral: clamp(4.5rem, 2.2rem + 9.5vw, 11rem);

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.58;

  --track-display: -0.025em;
  --track-caps: 0.16em;

  --w-regular: 400;
  --w-medium: 500;
  --w-strong: 600;
  --w-bold: 700;

  /* ---- space: a 4px grid, the same grid the pixel art sits on ------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-section: clamp(96px, 7vw + 64px, 184px);

  --page-max: 1360px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --header-h: 80px;

  /* ---- shape ----------------------------------------------------------------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 14px;
  --r-round: 999px;
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;

  --shadow-lift: 0 1px 0 rgb(40 34 48 / 0.06), 0 22px 44px -22px rgb(24 30 66 / 0.5);
  --shadow-ledge: 0 4px 0 0 var(--ink);           /* hard pixel ledge under a slab */
  --focus-ring: 0 0 0 2px var(--c-page), 0 0 0 4px var(--c-text);

  /* ---- motion --------------------------------------------------------------- */
  --ease-lift: cubic-bezier(0.7, 0, 0.2, 1);      /* elevator: slow start, glide, soft stop */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;
  --dur-doors: 1500ms;

  /* ---- stacking ------------------------------------------------------------ */
  --z-sky: 0;
  --z-city: 1;
  --z-page: 2;
  --z-header: 40;
  --z-toast: 80;
  --z-modal: 90;

  /* ---- pixel art ------------------------------------------------------------- */
  /* One art pixel = --px. story.js sets it to a whole number of DEVICE pixels,
     so every sprite lands on the device grid at any zoom or DPR. */
  --px: 1px;
}

@media (max-width: 720px) {
  :root {
    --header-h: 60px;
  }
}

/* A panel that sits straight on the night sky flips the roles. Components
   written against --c-* adapt without extra rules. */
[data-surface="night"] {
  --c-page: var(--night-2);
  --c-surface: #262b58;
  --c-surface-alt: #20254c;
  --c-sunken: #151a3a;
  --c-text: var(--paper-cream);
  --c-text-soft: #cfc8dc;
  --c-text-faint: #a39cb8;
  --c-line: rgb(245 239 225 / 0.16);
  --c-line-strong: rgb(245 239 225 / 0.36);
  --c-edge: #0e1230;
  --c-action: var(--paper-cream);
  --c-action-text: var(--ink);
  --c-action-hover: var(--brass-hi);
  --c-link: var(--brass-hi);
  --c-good: #9fd39a;
  --c-good-bg: rgb(84 152 80 / 0.22);
  --c-freeze: #b4d8e6;
  --c-freeze-bg: rgb(156 198 216 / 0.18);
  --c-bad: #f4a3a0;
  --c-bad-bg: rgb(186 96 80 / 0.24);
  --c-you-bg: rgb(206 164 74 / 0.22);
}

/* Paper, explicitly (for a paper card that sits inside a night section). */
[data-surface="paper"] {
  --c-page: var(--paper-cream);
  --c-surface: var(--paper-white);
  --c-surface-alt: var(--paper-cream);
  --c-sunken: var(--paper-shade);
  --c-text: var(--ink);
  --c-text-soft: var(--ink-2);
  --c-text-faint: var(--ink-3);
  --c-line: rgb(40 34 48 / 0.14);
  --c-line-strong: rgb(40 34 48 / 0.34);
  --c-edge: var(--ink);
  --c-action: var(--ink);
  --c-action-text: var(--paper-cream);
  --c-action-hover: var(--night-3);
  --c-link: var(--wine);
  --c-good: var(--leaf-lo);
  --c-good-bg: var(--paper-sage);
  --c-freeze: var(--pool-lo);
  --c-freeze-bg: var(--paper-sky);
  --c-bad: var(--wine);
  --c-bad-bg: var(--paper-peach);
  --c-you-bg: #f4e7bd;
}