/*
 * ACEwithCrystal — Design Tokens
 * css/variables.css
 *
 * Single source of truth for all brand colours, spacing, typography,
 * and component-level tokens.  Import this file first in every stylesheet.
 */

/* ─── Google Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Root Tokens ───────────────────────────────────────────────────────── */
:root {

  /* Brand palette */
  --purple:       #18082E;   /* Primary deep purple */
  --purple2:      #2B1157;   /* Lighter purple */
  --purple3:      #3D1F72;   /* Accent purple */

  --gold:         #C49A3C;   /* Primary gold */
  --gold-lt:      #FDF6E3;   /* Light gold / cream */
  --gold-bd:      #E8D490;   /* Gold border */
  --gold-dk:      #9A7520;   /* Dark gold */

  --white:        #FFFFFF;
  --off:          #F7F5F0;   /* Off-white page background */
  --cream:        #F0EDE4;   /* Section background */
  --cream2:       #E8E5DC;   /* Darker cream / dividers */

  --ink:          #0F0E0B;   /* Primary text */
  --ink2:         #2A2920;   /* Secondary text */
  --ink3:         #5A5848;   /* Muted body text */
  --muted:        #9A9888;   /* Disabled / placeholder text */

  /* Borders */
  --border:       rgba(15, 14, 11, 0.09);
  --border2:      rgba(15, 14, 11, 0.15);
  --border3:      rgba(15, 14, 11, 0.22);

  /* Layout */
  --max:          1200px;    /* Max content width */
  --nav-h:        68px;      /* Nav bar height */
  --section-v:    80px;      /* Section vertical padding */

  /* Shape */
  --r:            12px;      /* Default card border-radius */
  --r-sm:         6px;       /* Button / input border-radius */
  --r-tag:        4px;       /* Tag / badge border-radius */

  /* Typography */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Shadows */
  --shadow-sm:    0 2px 8px rgba(15, 14, 11, 0.07);
  --shadow-md:    0 6px 24px rgba(15, 14, 11, 0.10);
  --shadow-lg:    0 12px 40px rgba(15, 14, 11, 0.14);

  /* Transitions */
  --t-fast:       0.15s ease;
  --t-base:       0.2s ease;
  --t-slow:       0.3s ease;

  /* Tier-specific colours */
  --tier-low-bg:       #FAFAF4;
  --tier-low-border:   #E6E2D4;
  --tier-low-badge-bg: #FEFCE4;
  --tier-low-badge-fg: #7A6800;
  --tier-low-price:    #6A5A00;

  --tier-mid-bg:       #F2F4F9;
  --tier-mid-border:   #D4DAEA;
  --tier-mid-badge-bg: #EEF2FA;
  --tier-mid-badge-fg: #1E3878;
  --tier-mid-price:    #1E3878;

  --tier-high-bg:      var(--purple);
  --tier-high-body:    #1A0C30;
  --tier-high-price:   var(--gold);
}