/**
 * Design tokens — the single place to restyle the whole storefront.
 *
 * Direction: "Lumos". The shop is named for light, and light is what the
 * interface is made of: a deep violet night, one warm luminous accent, and
 * glow used only where something is genuinely worth looking at. Nothing is
 * borrowed from any fictional universe — no wands, no crests, no house
 * colours. The magic is the light itself.
 *
 * The one signature is `.slab`: product media held in a frame that appears
 * lit from within, the way a graded card sits under a lamp.
 *
 * Changing brand colour means editing this file only. Nothing else in the
 * theme hardcodes a colour, radius, or type size.
 */

/* --------------------------------------------------------------- type
   Self-hosted. No Google Fonts: a cross-origin render-blocking request and
   one more cookie-banner problem for a shop that needs neither. Latin subset
   only — Portuguese, Spanish and French are fully covered by it. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette — violet night, warm light. Deliberately not the blue-black
     every other card shop uses, and deliberately not purple-on-white either. */
  --c-night: #0a0718;        /* fundo da página */
  --c-night-2: #100c24;      /* faixas e rodapé */
  --c-raised: #171232;       /* superfície elevada */
  --c-raised-2: #1f1943;     /* superfície interactiva */
  --c-line: #2b2350;
  --c-line-2: #3d3271;
  --c-ice: #f0ecff;          /* texto principal */
  --c-slate: #a49cc8;        /* texto secundário */
  --c-slate-dim: #7d76a0;    /* texto terciário, legendas */
  --c-lumos: #ffd98a;        /* luz quente — acção */
  --c-lumos-deep: #f0b94a;
  --c-arcane: #8b6cff;       /* violeta — realce, aurora */
  --c-aether: #5ee7ff;       /* ciano — brilho frio, holo */
  --c-jade: #45e0a4;         /* disponível, confirmado */
  --c-flare: #ff6b8a;        /* esgotado, erro */

  /* Semantic aliases. Components reference these, never the raw palette. */
  --bg-page: var(--c-night);
  --bg-band: var(--c-night-2);
  --bg-surface: var(--c-raised);
  --bg-surface-2: var(--c-raised-2);
  --bg-media: #0c0920;
  --text-body: var(--c-ice);
  --text-muted: var(--c-slate);
  --text-faint: var(--c-slate-dim);
  --text-on-accent: #241a05;
  --accent: var(--c-lumos);
  --accent-hover: var(--c-lumos-deep);
  --accent-soft: var(--c-arcane);
  --state-ok: var(--c-jade);
  --state-alert: var(--c-flare);
  --border: var(--c-line);
  --border-strong: var(--c-line-2);
  --focus: var(--c-lumos);

  /* Type. Archivo carries a width axis — set codes on a card are wide and
     technical, so the display face is too. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Consolas, monospace;

  /* Fluid type scale. */
  --t-micro: 0.625rem;
  /* Section labels: uppercase mono, one step above --t-micro so a tracked
     label still reads as a heading rather than fine print. */
  --t-label: 0.6875rem;
  --t-small: 0.8125rem;
  /* Navigation and footer link lists. Between --t-small and --t-body: large
     enough to scan down a column, small enough that the longest legal link
     stays on one line in all four languages. */
  --t-nav: 0.875rem;
  --t-body: 0.9375rem;
  /* Running prose on a document page. A step above --t-body: the reading
     column is wide, and a wide measure needs a larger face to stay
     comfortable. */
  --t-prose: 1rem;
  --t-lead: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  --t-h3: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  /* Section headings inside a document. Between --t-h3 and --t-h2: a clear
     step above running text without turning a six-section support page into
     six banners. */
  --t-section: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  --t-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  --t-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);

  /* Spacing, in a 4px rhythm. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: clamp(3rem, 6vw, 5rem);

  --radius: 14px;
  --radius-sm: 9px;
  --shell: 1240px;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --header-h: 80px;

  --shadow-card: 0 24px 44px -26px #000;
  --shadow-pop: 0 26px 52px -20px #000;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);

  /* --------------------------------------------------------- the light
     Three effects, and only three. Each is defined once here so the whole
     "magic" of the site can be turned down from a single place. */

  /* 1. The sheen that crosses a slab on hover. Light passing over glass. */
  --lumos-sheen: linear-gradient(
    115deg,
    transparent 30%,
    rgba(94, 231, 255, 0.14) 42%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 217, 138, 0.16) 58%,
    transparent 70%
  );

  /* 2. The halo a lit object casts on the surface behind it. */
  --lumos-halo: 0 0 0 1px rgba(255, 217, 138, 0.35), 0 0 34px -6px rgba(255, 217, 138, 0.4);
  --lumos-halo-cool: 0 0 0 1px rgba(139, 108, 255, 0.4), 0 0 40px -10px rgba(139, 108, 255, 0.55);

  /* 3. The ambient aurora behind the hero. */
  --lumos-aurora-a: rgba(139, 108, 255, 0.40);
  --lumos-aurora-b: rgba(94, 231, 255, 0.24);
  --lumos-aurora-c: rgba(255, 217, 138, 0.22);
}