/* ============================================================
   REDSTAR — Design Tokens
   Y2K revival · celestial minimalism · pure line art.
   Framework-agnostic CSS custom properties — the single
   source of truth for color, type, spacing, effects.
   Base palette copied from ../shared/tokens.css, then
   extended for the full multi-page HTML template.
   ============================================================ */

:root {
  /* ---- Primary palette (from shared/tokens.css) ---- */
  --coral: #e06030;
  --coral-light: #f08050;
  --coral-dark: #c04020;
  --white: #ffffff;
  --black: #1a1a1a;

  /* ---- Surfaces (light / cream) ---- */
  --rs-bg: #faf5ec;          /* warm cream page background */
  --rs-surface: #ffffff;     /* card / panel white */
  --rs-surface-alt: #f4ecdf; /* alternating section band */
  --rs-cream: #fdf9f2;

  /* ---- Celestial line work (coral hairlines) ---- */
  --rs-line: #e06030;
  --rs-line-soft: rgba(224, 96, 48, .38);
  --rs-line-faint: rgba(224, 96, 48, .18);

  /* ---- Ink / text (warm, kept legible on cream) ---- */
  --ink-900: #2a170e;   /* darkest warm ink */
  --ink-700: #4a2c1c;   /* body copy */
  --ink-500: #7a5642;   /* muted copy */
  --ink-400: #9a7a68;   /* faint / meta */
  --ink-300: #bda596;   /* very faint */

  /* ---- Accent aliases (semantic) ---- */
  --accent: var(--coral);
  --accent-strong: var(--coral-dark);
  --accent-soft: rgba(224, 96, 48, .10);

  /* ---- Signature gradients ---- */
  --coral-gradient: linear-gradient(135deg, #f08050 0%, #e06030 50%, #c04020 100%);
  --coral-gradient-soft: linear-gradient(135deg, rgba(240,128,80,.9), rgba(192,64,32,.9));
  --deco-line: linear-gradient(90deg, transparent, rgba(224,96,48,.5), transparent);
  --glow-radial:
    radial-gradient(ellipse at 30% 40%, rgba(240,128,80,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 55%, rgba(224,96,48,.08) 0%, transparent 55%);

  /* ---- Soft coral shadows (line-art keeps these subtle) ---- */
  --shadow-soft: 0 4px 20px rgba(224, 96, 48, .10);
  --shadow-sm: 0 2px 12px rgba(224, 96, 48, .10);
  --shadow-md: 0 8px 30px rgba(224, 96, 48, .14);
  --glow-coral: 0 0 0 1px rgba(224, 96, 48, .35), 0 6px 24px rgba(224, 96, 48, .12);

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "JetBrains Mono", monospace;

  /* ---- Layout ---- */
  --container: 72rem;      /* 1152px */
  --container-narrow: 48rem;
  --radius: 4px;           /* small, crisp corners */
  --radius-pill: 999px;    /* Y2K pill for buttons / badges */
  --border-thin: 1px;
  --border-medium: 2px;

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

  /* ---- Celestial line-art background pattern (thin grid + star) ---- */
  --deco-pattern: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23e06030' stroke-width='0.5' opacity='0.28'%3E%3Ccircle cx='36' cy='36' r='22'/%3E%3Cpath d='M36 6v60M6 36h60'/%3E%3C/g%3E%3C/svg%3E");
}