/* ==========================================================================
   GrapeMC — v2 "Auregon Replica" Design Tokens
   Exploration build: structurally/visually replicates the layout density,
   card treatment, spacing rhythm and type scale of the Auregon reference
   (see 08_Website/Auregon_Design_System_Reference.md) as closely as
   possible, using GrapeMC's own locked color palette, fonts and real
   content. Does NOT touch the live 08_Website/ build.
   ========================================================================== */

:root {
  /* ---- Color (GrapeMC locked palette — unchanged) ---- */
  --color-white: #FFFFFF;
  --color-near-black: #151515;
  --color-near-black-2: #1F1F1F;   /* secondary dark surface, for cards-on-dark */
  --color-text-muted: #666666;
  --color-amber: #F9A900;
  --color-amber-dark: #D98E00;
  --color-amber-soft: rgba(249, 169, 0, 0.12);
  --color-rust: #D8441F;
  --color-off-white: #F6F6F1;
  --color-cream: #FBF3E2;   /* warm amber-tinted surface — distinct from off-white, used to separate consecutive light sections */
  --color-border: #E8E6DF;

  /* ---- Spacing (8-point scale, extended for generous section padding) ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --space-10: 160px;

  /* ---- Radius (large, soft-rounded — matches Auregon's 15-25px cards) ---- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---- Shadow (strong ambient lift — cards read as "floating," no borders) ---- */
  --shadow-card: 0 8px 28px rgba(21, 21, 21, 0.11), 0 2px 6px rgba(21, 21, 21, 0.08);
  --shadow-card-hover: 0 26px 54px rgba(21, 21, 21, 0.22), 0 6px 14px rgba(21, 21, 21, 0.12);
  --shadow-soft-dark: 0 8px 28px rgba(0, 0, 0, 0.35);

  /* ---- Type family (GrapeMC locked — unchanged) ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* ---- Type scale (fluid clamp() throughout, bigger ceiling than v1) ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.9rem;
  --text-base: 1.05rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.5rem, 1rem + 2vw, 2.1rem);
  --text-3xl: clamp(1.9rem, 1rem + 3vw, 2.75rem);
  --text-4xl: clamp(2.4rem, 1rem + 4.5vw, 3.75rem);
  --text-5xl: clamp(2.75rem, 1rem + 6vw, 5rem);

  /* ---- Layout (wide + spacious, close to Auregon's 1650px container) ---- */
  --container-max: 1600px;
  --container-pad: var(--space-4);

  /* ---- Motion timing ---- */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration-base: 0.6s;
  --duration-slow: 0.9s;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-6);
  }
}