/* ============================================================
   CaribFlow — css/variables.css
   Global Theme, Mode, and Accent Token System
   ============================================================ */

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
@font-face {
  font-family: "OpenDyslexic";
  src: url("../assets/fonts/OpenDyslexic-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "OpenDyslexic";
  src: url("../assets/fonts/OpenDyslexic-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

:root {
  /* Font Stacks */
  --font-family-apple:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-dyslexic: "OpenDyslexic", var(--font-family-apple);
  --font-family-mono:    "SF Mono", "Fira Code", "Consolas", monospace;

  /* Active font (toggled by dyslexic mode) */
  --font-active: var(--font-family-apple);

  /* Type Scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-hero: 3.5rem;     /* 56px */

  /* Font Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-heavy:     800;

  /* ── BORDER RADIUS ────────────────────────────────────── */
  --radius-sm:     6px;
  --radius-apple:  12px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-xl:     32px;
  --radius-pill:   9999px;

  /* ── SPACING SCALE ────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-slow:   all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* ── GLASS EFFECT TOKENS ──────────────────────────────── */
  --glass-blur:        blur(20px);
  --glass-blur-heavy:  blur(40px);
  --glass-blur-light:  blur(10px);
  --glass-shadow:      0 8px 32px 0 rgba(0, 0, 0, 0.2);
  --glass-shadow-sm:   0 4px 16px 0 rgba(0, 0, 0, 0.12);
  --glass-shadow-lg:   0 16px 48px 0 rgba(0, 0, 0, 0.3);
  --glass-shadow-xl:   0 24px 64px 0 rgba(0, 0, 0, 0.4);

  /* ── Z-INDEX STACK ────────────────────────────────────── */
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-island:     500;
  --z-modal:      1000;
  --z-overlay:    2000;
  --z-toast:      3000;
  --z-max:        9999;

  /* ── ECONOMY COLORS ───────────────────────────────────── */
  --coin-color:    #FFD700;
  --coin-glow:     rgba(255, 215, 0, 0.4);
  --diamond-color: #00D4FF;
  --diamond-glow:  rgba(0, 212, 255, 0.4);
  --xp-color:      #9B59B6;
  --xp-glow:       rgba(155, 89, 182, 0.4);

  /* ── ACHIEVEMENT STATES ───────────────────────────────── */
  --achievement-gold:     #FFD700;
  --achievement-silver:   #C0C0C0;
  --achievement-locked:   rgba(128, 128, 128, 0.4);
  --achievement-progress: var(--accent-color);

  /* ── SEMANTIC COLORS (theme-independent) ──────────────── */
  --color-success:  #34C759;
  --color-warning:  #FF9500;
  --color-error:    #FF3B30;
  --color-info:     #0071E3;

  /* ── ANIMATION TIMING FUNCTIONS ───────────────────────── */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-smooth:  cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── LIGHT THEME ──────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg-primary:       #f5f5f7;
  --bg-secondary:     rgba(255, 255, 255, 0.65);
  --bg-tertiary:      rgba(240, 240, 245, 0.8);
  --glass-bg:         rgba(255, 255, 255, 0.4);
  --glass-border:     rgba(255, 255, 255, 0.45);
  --panel-overlay:    rgba(255, 255, 255, 0.85);
  --text-main:        #1d1d1f;
  --text-secondary:   #3a3a3c;
  --text-muted:       #86868b;
  --text-placeholder: #aeaeb2;
  --divider:          rgba(0, 0, 0, 0.08);
  --input-bg:         rgba(255, 255, 255, 0.7);
  --input-border:     rgba(0, 0, 0, 0.12);
  --card-bg:          rgba(255, 255, 255, 0.6);
  --nav-bg:           rgba(245, 245, 247, 0.85);
  --island-bg:        #1d1d1f;
  --island-text:      #f5f5f7;
  --scrollbar-thumb:  rgba(0, 0, 0, 0.2);
  --scrollbar-track:  rgba(0, 0, 0, 0.05);
  --skeleton-base:    rgba(0, 0, 0, 0.06);
  --skeleton-shine:   rgba(0, 0, 0, 0.02);
}

/* ── DARK THEME ───────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg-primary:       #000000;
  --bg-secondary:     rgba(28, 28, 30, 0.65);
  --bg-tertiary:      rgba(44, 44, 46, 0.8);
  --glass-bg:         rgba(30, 30, 30, 0.4);
  --glass-border:     rgba(255, 255, 255, 0.12);
  --panel-overlay:    rgba(0, 0, 0, 0.85);
  --text-main:        #f5f5f7;
  --text-secondary:   #d1d1d6;
  --text-muted:       #86868b;
  --text-placeholder: #636366;
  --divider:          rgba(255, 255, 255, 0.08);
  --input-bg:         rgba(44, 44, 46, 0.7);
  --input-border:     rgba(255, 255, 255, 0.12);
  --card-bg:          rgba(30, 30, 30, 0.6);
  --nav-bg:           rgba(0, 0, 0, 0.85);
  --island-bg:        rgba(30, 30, 30, 0.95);
  --island-text:      #f5f5f7;
  --scrollbar-thumb:  rgba(255, 255, 255, 0.2);
  --scrollbar-track:  rgba(255, 255, 255, 0.03);
  --skeleton-base:    rgba(255, 255, 255, 0.06);
  --skeleton-shine:   rgba(255, 255, 255, 0.02);
}

/* ── HIGH CONTRAST THEME ──────────────────────────────────── */
:root[data-theme="high-contrast"] {
  --bg-primary:       #000000;
  --bg-secondary:     #111111;
  --bg-tertiary:      #1a1a1a;
  --glass-bg:         rgba(0, 0, 0, 0.9);
  --glass-border:     rgba(255, 255, 255, 0.8);
  --panel-overlay:    rgba(0, 0, 0, 0.95);
  --text-main:        #ffffff;
  --text-secondary:   #eeeeee;
  --text-muted:       #cccccc;
  --text-placeholder: #888888;
  --divider:          rgba(255, 255, 255, 0.4);
  --input-bg:         #111111;
  --input-border:     rgba(255, 255, 255, 0.6);
  --card-bg:          #0a0a0a;
  --nav-bg:           #000000;
  --island-bg:        #ffffff;
  --island-text:      #000000;
  --scrollbar-thumb:  rgba(255, 255, 255, 0.5);
  --scrollbar-track:  rgba(255, 255, 255, 0.1);
  --skeleton-base:    rgba(255, 255, 255, 0.1);
  --skeleton-shine:   rgba(255, 255, 255, 0.05);
}

/* ── ACCENT PALETTES ──────────────────────────────────────── */
:root[data-accent="ocean"] {
  --accent-color:      #0071e3;
  --accent-hover:      #0077ED;
  --accent-active:     #005BBB;
  --accent-glow:       rgba(0, 113, 227, 0.4);
  --accent-subtle:     rgba(0, 113, 227, 0.12);
  --accent-text:       #ffffff;
  --gradient-primary:  linear-gradient(135deg, #0071e3 0%, #00c6ff 100%);
  --gradient-ambient:  linear-gradient(160deg, rgba(0, 113, 227, 0.15) 0%, rgba(0, 198, 255, 0.08) 100%);
}
:root[data-accent="green"] {
  --accent-color:      #34c759;
  --accent-hover:      #2DB14E;
  --accent-active:     #28A046;
  --accent-glow:       rgba(52, 199, 89, 0.4);
  --accent-subtle:     rgba(52, 199, 89, 0.12);
  --accent-text:       #ffffff;
  --gradient-primary:  linear-gradient(135deg, #34c759 0%, #00e676 100%);
  --gradient-ambient:  linear-gradient(160deg, rgba(52, 199, 89, 0.15) 0%, rgba(0, 230, 118, 0.08) 100%);
}
:root[data-accent="sunset"] {
  --accent-color:      #ff9500;
  --accent-hover:      #E58600;
  --accent-active:     #CC7700;
  --accent-glow:       rgba(255, 149, 0, 0.4);
  --accent-subtle:     rgba(255, 149, 0, 0.12);
  --accent-text:       #ffffff;
  --gradient-primary:  linear-gradient(135deg, #ff9500 0%, #ffcc02 100%);
  --gradient-ambient:  linear-gradient(160deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 204, 2, 0.08) 100%);
}
:root[data-accent="coral"] {
  --accent-color:      #ff3b30;
  --accent-hover:      #E5352B;
  --accent-active:     #CC2F25;
  --accent-glow:       rgba(255, 59, 48, 0.4);
  --accent-subtle:     rgba(255, 59, 48, 0.12);
  --accent-text:       #ffffff;
  --gradient-primary:  linear-gradient(135deg, #ff3b30 0%, #ff9500 100%);
  --gradient-ambient:  linear-gradient(160deg, rgba(255, 59, 48, 0.15) 0%, rgba(255, 149, 0, 0.08) 100%);
}
:root[data-accent="purple"] {
  --accent-color:      #9B59B6;
  --accent-hover:      #8E44AD;
  --accent-active:     #7D3C98;
  --accent-glow:       rgba(155, 89, 182, 0.4);
  --accent-subtle:     rgba(155, 89, 182, 0.12);
  --accent-text:       #ffffff;
  --gradient-primary:  linear-gradient(135deg, #9B59B6 0%, #D7BDE2 100%);
  --gradient-ambient:  linear-gradient(160deg, rgba(155, 89, 182, 0.15) 0%, rgba(215, 189, 226, 0.08) 100%);
}

/* ── DYSLEXIC MODE ────────────────────────────────────────── */
[data-dyslexic="true"] {
  --font-active: var(--font-family-dyslexic);
  --text-xs:   0.85rem;
  --text-sm:   1rem;
  --text-base: 1.1rem;
  --text-md:   1.25rem;
  --text-lg:   1.4rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  word-spacing: 0.15em;
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   none;
    --transition-smooth: none;
    --transition-spring: none;
    --transition-slow:   none;
  }
}