/* ============================================================
   RED PLANET — Design Tokens
   Framework-agnostic CSS custom properties.
   Single source of truth for color, type, spacing, effects.
   A warm space / Mars aesthetic: sunset sky (orange → coral →
   magenta) over a deep Martian-night ground.

   NOTE ON NAMING: variable names mirror the shared Ventus
   template contract (--nd-*, --prism-*, --neutral-*, --glow-*)
   so styles.css / components.css port cleanly between templates.
   Here the "prism" spectrum is remapped to the SUNSET spectrum
   (warm orange → coral → magenta), and the surfaces to the dark,
   dusty Martian ground. Only the values differ — the theme.
   ============================================================ */

:root {
  /* ---- Surfaces (deep Martian-night ground, warm-black) ---- */
  --nd-black: #150b11;      /* deepest ground / page base */
  --nd-charcoal: #21121a;   /* raised panels, alt sections */
  --nd-slate: #2e1922;      /* card surface (dusty maroon) */

  /* ---- Dusty regolith line work ---- */
  --nd-line: #5a3540;
  --nd-line-light: #6e4450;
  --nd-line-faint: #3a2028;

  /* ---- Sunset spectrum (the signature accent) ---- */
  --prism-cyan: #ff9a56;    /* PRIMARY accent — warm orange */
  --prism-teal: #ff7a6b;    /* coral */
  --prism-pink: #ff6b9e;    /* magenta-pink */
  --prism-coral: #ff8a80;
  --prism-orange: #ffb05c;
  --prism-gold: #ffc857;    /* gold sun-glint (prices, checks) */

  /* ---- Warm neutrals (text on dark ground) ---- */
  --neutral-50: #fff6f0;
  --neutral-100: #fbe9df;   /* headings */
  --neutral-200: #ecd4c7;   /* body text */
  --neutral-300: #d3ac9c;
  --neutral-400: #b0887a;   /* muted */
  --neutral-500: #8a6458;
  --neutral-600: #6a4a42;
  --neutral-700: #4a302a;
  --neutral-800: #331f1b;
  --neutral-900: #1f110e;

  /* ---- Signature gradients ---- */
  --prism-gradient: linear-gradient(135deg, #ffb05c 0%, #ff7a59 42%, #ff5e8a 72%, #c0407a 100%);
  --prism-gradient-soft: linear-gradient(135deg, rgba(255,176,92,.85) 0%, rgba(255,122,89,.85) 45%, rgba(255,107,158,.85) 100%);
  --deco-line: linear-gradient(90deg, transparent, rgba(255,154,86,.4), rgba(255,107,158,.4), transparent);

  /* Sunset SKY gradient (top → horizon → dark ground) */
  --gradient-hero: linear-gradient(180deg,
      #2a1030 0%,     /* high dusk violet */
      #6e2a48 20%,    /* magenta band */
      #b8483a 42%,    /* deep coral */
      #e87040 56%,    /* burning orange horizon glow */
      #a63c2e 74%,    /* dimming */
      #2e1922 92%,
      var(--nd-black) 100%);

  --glow-radial-prism:
    radial-gradient(ellipse at 50% 30%, rgba(255,176,92,.16) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(255,107,158,.10) 0%, transparent 55%);

  /* ---- Warm glow shadows (sun-lit halos, no hard shadows) ---- */
  --glow-sm: 0 0 20px rgba(255,138,76,.18);
  --glow-md: 0 0 40px rgba(255,138,76,.24);
  --glow-lg: 0 0 60px rgba(255,138,76,.30);
  --glow-pink: 0 0 40px rgba(255,107,158,.22);
  --glow-prism: 0 0 40px rgba(255,138,76,.18), 0 0 80px rgba(255,107,158,.12);

  /* ---- Typography ---- */
  --font-display: "Orbitron", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Work Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- Layout ---- */
  --container: 72rem;      /* 1152px */
  --container-narrow: 48rem;
  --radius: 14px;          /* soft, friendly rovers-and-domes rounding */
  --radius-pill: 999px;
  --hairline: .5px;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 500ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---- Starfield / regolith background pattern (subtle warm dots) ---- */
  --deco-pattern: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffb05c' fill-opacity='0.35'%3E%3Ccircle cx='15' cy='22' r='1'/%3E%3Ccircle cx='70' cy='12' r='.8'/%3E%3Ccircle cx='104' cy='40' r='1.1'/%3E%3Ccircle cx='45' cy='58' r='.7'/%3E%3Ccircle cx='90' cy='80' r='1'/%3E%3Ccircle cx='22' cy='95' r='.9'/%3E%3Ccircle cx='60' cy='104' r='.7'/%3E%3Ccircle cx='112' cy='108' r='.8'/%3E%3C/g%3E%3C/svg%3E");
}