/* Dremvale design tokens. Every colour, size and duration in the theme comes from here.
   Values are taken from the approved prototypes (Oct 2026). See docs/design-system.md. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lora-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/lora-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/lora-latin-400-italic.woff2) format("woff2")}

:root{
  /* Night sky surfaces, darkest to lightest */
  --night:#080d15;
  --night-2:#0c131e;
  --panel:#111a27;
  --panel-2:#16212f;
  --drawer:#0e1520;
  --header-bg:rgba(10,17,27,.9);

  /* Ink (warm off-white) */
  --ink:#F7EFE3;
  --ink-2:#D9CCB9;
  --ink-3:#AFA291;

  /* Gold accent */
  --gold:#ECC480;
  --gold-hover:#f3d397;
  --gold-deep:#C3A36D;
  --gold-ink:#1c140d;          /* text on gold */
  --gold-soft:rgba(236,196,128,.1);
  --gold-line:rgba(236,196,128,.25);

  /* Lines */
  --line:rgba(236,220,196,.14);
  --line-strong:rgba(236,220,196,.3);

  /* Status */
  --ok:#8fcf9b;
  --warn:#e9b872;
  --error:#f08a7e;
  --info:#9cc3e6;

  /* Product stage behind cut-out kit photos */
  --stage:radial-gradient(ellipse at 50% 62%,#2A3A55 0%,#141E2E 55%,#0C131E 100%);

  /* Type */
  --display:"Lora",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:14px;
  --fs-base:16px;
  --fs-lg:17px;
  --fs-xl:21px;
  --fs-h3:clamp(22px,2.2vw,26px);
  --fs-h2:clamp(30px,3.2vw,40px);
  --fs-h1:clamp(36px,4.6vw,56px);
  --fs-hero:clamp(40px,6vw,72px);
  --lh-tight:1.1;
  --lh-body:1.55;
  --lh-read:1.7;

  /* Spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px; --s-18:72px;

  /* Radius */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:24px; --r-pill:999px;

  /* Layout */
  --wrap:1280px;
  --gutter:16px;
  --hdr:68px;
  --tap:44px;                  /* minimum touch target */

  /* Elevation */
  --shadow-pop:0 18px 40px rgba(0,0,0,.45);
  --shadow-kit:drop-shadow(0 18px 18px rgba(0,0,0,.45));

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:.2s;
  --t-med:.35s;
  --t-slow:.5s;

  color-scheme:dark;
}
@media (min-width:900px){:root{--gutter:48px}}
/* Wide screens: the page grows with the window instead of sitting in a 1280px column. */
@media (min-width:1440px){:root{--wrap:min(92vw,1920px);--gutter:64px}}