/* ═══════════════════════════════════════════════════════════════════
   TWOGEES ACADEMY — Design Token System
   Light: "Prestige Navy" — trustworthy, warm, approachable wealth
   Dark:  "Midnight Gold" — black tie, amber luminosity, luxury
   ═══════════════════════════════════════════════════════════════════ */

:root {
   /* ── Core Palette: Prestige Navy ──────────────────────────────
     Warm parchment meets deep teal-navy. Feels like a
     private members' club — refined but not cold. */
   --nm-bg: #F6F3ED;
   --nm-card: #FCFAF5;
   --nm-text: #1C1A16;
   --nm-text-secondary: #787165;
   --nm-accent: #1A3A4A;
   --nm-accent-light: #4A8B9C;
   --nm-accent-dark: #0E2430;
   --nm-success: #2D6E4E;
   --nm-danger: #C44A4A;

   /* ── Neumorphic Shadows ────────────────────────────────────────
     Warm brown shadows + cream highlights = the feel of
     embossed paper or brushed metal. */
   --nm-shadow-out: 8px 8px 16px rgba(175, 163, 148, 0.3),
      -8px -8px 16px rgba(255, 253, 249, 0.7);
   --nm-shadow-in: inset 4px 4px 8px rgba(175, 163, 148, 0.25),
      inset -4px -4px 8px rgba(255, 253, 249, 0.55);
   --nm-shadow-out-sm: 4px 4px 8px rgba(175, 163, 148, 0.2),
      -4px -4px 8px rgba(255, 253, 249, 0.6);
   --nm-shadow-in-sm: inset 2px 2px 4px rgba(175, 163, 148, 0.2),
      inset -2px -2px 4px rgba(255, 253, 249, 0.5);
   --nm-shadow-out-lg: 12px 12px 24px rgba(175, 163, 148, 0.35),
      -12px -12px 24px rgba(255, 253, 249, 0.7);

   /* ── Radii & Motion ──────────────────────────────────────────── */
   --nm-radius: 16px;
   --nm-radius-sm: 10px;
   --nm-radius-lg: 24px;
   --nm-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

   /* ── Theme Aliases ───────────────────────────────────────────── */
   --theme-bg: var(--nm-bg);
   --theme-surface: var(--nm-card);
   --theme-text: var(--nm-text);
   --theme-text-secondary: var(--nm-text-secondary);
   --theme-accent: var(--nm-accent);
   --theme-accent-hover: #225E72;
   --theme-border: #E2DCD0;
   --theme-success: var(--nm-success);
   --theme-error: var(--nm-danger);

   /* ── Legacy Aliases ──────────────────────────────────────────── */
   --bg: var(--nm-bg);
   --bg-card: var(--nm-card);
   --bg-deep: #E8E4DB;
   --text: var(--nm-text);
   --text2: var(--nm-text-secondary);
   --text3: #A0988A;
   --accent: var(--nm-accent);
   --accent-rgb: 26, 58, 74;
   --border: #DBD5C9;
   --border-s: #C9C0B2;
   --border-muted: #E8E2D8;
   --success: var(--nm-success);
   --success-bg: rgba(45, 110, 78, 0.08);
   --cta: var(--nm-accent);
   --cta-rgb: 26, 58, 74;
   --shadow: var(--nm-shadow-out);
   --shadow-sm: var(--nm-shadow-out-sm);
   --shadow-glow: 0 0 40px -8px rgba(26, 58, 74, 0.15);
   --glass: linear-gradient(135deg,
         rgba(252, 250, 245, 0.85),
         rgba(252, 250, 245, 0.95));
   --color-after: #3A7A5A;
   --color-after-rgb: 58, 122, 90;
   --gradient-partner: var(--nm-accent-dark);
   --warn: #B8860B;
   --danger: var(--nm-danger);
   --star: #C8933A;
   --brand-discord: #4A6A8B;
   --accent2: #2D6E4E;
   --accent3: #6B5B8A;
   --shadow-dark: rgba(175, 163, 148, 0.5);
   --shadow-light: rgba(255, 253, 249, 0.7);
   --nav-bg: rgba(246, 243, 237, 0.92);
   --input-focus: rgba(26, 58, 74, 0.12);
   --raised: var(--nm-card);
   --surface: var(--nm-card);
   --hover-bg: rgba(28, 26, 22, 0.04);
   --nm-shadow-btn: 4px 4px 10px rgba(175, 163, 148, 0.25),
      -4px -4px 10px rgba(255, 253, 249, 0.65);
   --nm-shadow-btn-hover: 6px 6px 15px rgba(175, 163, 148, 0.35),
      -6px -6px 15px rgba(255, 253, 249, 0.7);
   --nm-shadow-out-hover: 10px 10px 24px rgba(175, 163, 148, 0.4),
      -10px -10px 24px rgba(255, 253, 249, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME — "Midnight Gold"
   Deep warm charcoal, amber/gold accents, black-tie refinement.
   The light-shadow highlight uses a subtle warm tone to prevent
   flatness — like candlelight on dark wood.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
   /* ── Core Palette: Midnight Gold ─────────────────────────────
     Not pure black (#0E0E12), not cold. The gold accent reads
     as premium, not gaudy — think Patek Philippe lume. */
   --nm-bg: #0E0E12;
   --nm-card: #18181E;
   --nm-text: #EAE7E0;
   --nm-text-secondary: #898378;
   --nm-accent: #D4A03C;
   --nm-accent-light: #E2BC68;
   --nm-accent-dark: #B8882F;
   --nm-success: #5EA87A;
   --nm-danger: #D65A5A;

   /* ── Neumorphic Shadows ────────────────────────────────────────
     The warm highlight tone (35, 33, 28 / 0.3) is the secret
     ingredient — it gives every card a subtle golden edge-lift,
     like ambient light reflecting off brass. */
   --nm-shadow-out: 8px 8px 16px rgba(0, 0, 0, 0.55),
      -8px -8px 16px rgba(35, 33, 28, 0.3);
   --nm-shadow-in: inset 4px 4px 8px rgba(0, 0, 0, 0.5),
      inset -4px -4px 8px rgba(35, 33, 28, 0.2);
   --nm-shadow-out-sm: 4px 4px 8px rgba(0, 0, 0, 0.45),
      -4px -4px 8px rgba(35, 33, 28, 0.25);
   --nm-shadow-in-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.4),
      inset -2px -2px 4px rgba(35, 33, 28, 0.15);
   --nm-shadow-out-lg: 12px 12px 24px rgba(0, 0, 0, 0.55),
      -12px -12px 24px rgba(35, 33, 28, 0.35);

   /* ── Radii & Motion ──────────────────────────────────────────── */
   --nm-radius: 16px;
   --nm-radius-sm: 10px;
   --nm-radius-lg: 24px;
   --nm-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

   /* ── Theme Aliases ───────────────────────────────────────────── */
   --theme-bg: var(--nm-bg);
   --theme-surface: var(--nm-card);
   --theme-text: var(--nm-text);
   --theme-text-secondary: var(--nm-text-secondary);
   --theme-accent: var(--nm-accent);
   --theme-accent-hover: #E8C87A;
   --theme-border: #2A2824;
   --theme-success: var(--nm-success);
   --theme-error: var(--nm-danger);

   /* ── Legacy Aliases ──────────────────────────────────────────── */
   --bg: var(--nm-bg);
   --bg-card: var(--nm-card);
   --bg-deep: #0A0A0D;
   --text: var(--nm-text);
   --text2: var(--nm-text-secondary);
   --text3: #6A655C;
   --accent: var(--nm-accent);
   --accent-rgb: 212, 160, 60;
   --border: #2A2824;
   --border-s: #3A3732;
   --border-muted: #1C1A17;
   --success: var(--nm-success);
   --success-bg: rgba(94, 168, 122, 0.08);
   --cta: var(--nm-accent);
   --cta-rgb: 212, 160, 60;
   --shadow: var(--nm-shadow-out);
   --shadow-sm: var(--nm-shadow-out-sm);
   --shadow-glow: 0 0 40px -8px rgba(212, 160, 60, 0.2);
   --glass: linear-gradient(135deg,
         rgba(24, 24, 30, 0.85),
         rgba(24, 24, 30, 0.95));
   --color-after: #5EA87A;
   --color-after-rgb: 94, 168, 122;
   --gradient-partner: var(--nm-accent-dark);
   --warn: #C89530;
   --danger: var(--nm-danger);
   --star: var(--nm-accent);
   --brand-discord: #6A7A9A;
   --accent2: #5EA87A;
   --accent3: #8B7CB8;
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(35, 33, 28, 0.3);
   --nav-bg: rgba(14, 14, 18, 0.92);
   --input-focus: rgba(212, 160, 60, 0.12);
   --raised: var(--nm-card);
   --surface: var(--nm-card);
   --hover-bg: rgba(234, 231, 224, 0.04);
   --nm-shadow-btn: 4px 4px 10px rgba(0, 0, 0, 0.45),
      -4px -4px 10px rgba(35, 33, 28, 0.25);
   --nm-shadow-btn-hover: 6px 6px 15px rgba(0, 0, 0, 0.5),
      -6px -6px 15px rgba(35, 33, 28, 0.35);
   --nm-shadow-out-hover: 10px 10px 24px rgba(0, 0, 0, 0.55),
      -10px -10px 24px rgba(35, 33, 28, 0.35);
}