:root,
[data-theme="dark"] {
  
  --brand-blue: #559EE2;
  --brand-blue-light: #7CB5ED;
  --brand-blue-dark: #357ABD;
  --brand-blue-glow: rgba(85, 158, 226, 0.22);
  --brand-blue-glow-strong: rgba(85, 158, 226, 0.40);
  --brand-blue-muted: rgba(85, 158, 226, 0.10);

  --brand-green: #006233;
  --brand-green-light: #00A859;
  --brand-green-dark: #004524;
  --brand-green-glow: rgba(0, 168, 89, 0.22);
  --brand-green-glow-strong: rgba(0, 168, 89, 0.40);
  --brand-green-muted: rgba(0, 98, 51, 0.12);

  --brand-yellow: #FFD400;
  --brand-yellow-glow: rgba(255, 212, 0, 0.18);
  --brand-yellow-muted: rgba(255, 212, 0, 0.06);

  --primary: #559EE2;
  --primary-light: #7CB5ED;
  --primary-dark: #357ABD;
  --primary-glow: rgba(85, 158, 226, 0.22);
  --primary-glow-strong: rgba(85, 158, 226, 0.45);
  --primary-muted: rgba(85, 158, 226, 0.10);

  --accent: #00A859;
  --accent-light: #34EE9D;
  --accent-dark: #006233;
  --accent-glow: rgba(0, 168, 89, 0.22);
  --accent-muted: rgba(0, 98, 51, 0.10);

  --bg: #060B0E;
  --bg2: #081115;
  --bg3: #0B191E;
  --bg-gradient: 
    radial-gradient(at 0% 0%, rgba(85, 158, 226, 0.20) 0px, transparent 55%),
    radial-gradient(at 100% 8%, rgba(0, 98, 51, 0.26) 0px, transparent 50%),
    radial-gradient(at 50% 46%, rgba(85, 158, 226, 0.10) 0px, transparent 60%),
    radial-gradient(at 92% 68%, rgba(255, 212, 0, 0.05) 0px, transparent 40%),
    radial-gradient(at 8% 88%, rgba(0, 168, 89, 0.16) 0px, transparent 50%),
    linear-gradient(180deg, #060B0E 0%, #081216 38%, #06110D 72%, #050A0D 100%);

  --surface: rgba(10, 22, 28, 0.35);
  --surface2: rgba(13, 29, 36, 0.45);
  --card-bg: rgba(10, 22, 28, 0.30);
  --nav-bg: rgba(6, 14, 18, 0.55);
  
  --card-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(85, 158, 226, 0.05) 42%, rgba(0, 98, 51, 0.04) 100%), rgba(8, 18, 24, 0.5);
  --card-glass-border: rgba(255, 255, 255, 0.13);
  --card-glass-border-subtle: rgba(85, 158, 226, 0.22);
  --card-glass-specular: rgba(255, 255, 255, 0.25);
  --card-glass-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
  --card-glass-hover-border: rgba(85, 158, 226, 0.55);
  --card-glass-hover-shadow: 0 28px 60px -14px rgba(0, 0, 0, 0.66), 0 0 42px rgba(85, 158, 226, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.3);

  --nav-glass-bg: rgba(6, 14, 18, 0.65);
  --nav-glass-border: rgba(255, 255, 255, 0.14);
  --nav-glass-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);

  --gk-grad: linear-gradient(100deg, #7CB5ED 0%, #559EE2 34%, #34EE9D 100%);
  --gk-eyebrow: #34EE9D;
  --gk-tile-bg: rgba(85, 158, 226, 0.14);
  --gk-tile-border: rgba(85, 158, 226, 0.34);
  --gk-tile-fg: #7CB5ED;
  --gk-soft: rgba(255, 255, 255, 0.05);
  --gk-line: rgba(255, 255, 255, 0.13);
  --gk-ok: #34EE9D;
  --gk-warn: #FFD400;
  --gk-bad: #FF5C5C;

  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-heavy: blur(28px) saturate(190%);

  --border: rgba(85, 158, 226, 0.15);
  --border-strong: rgba(85, 158, 226, 0.30);
  --border-glass: rgba(255, 255, 255, 0.10);
  --border-glass-hover: rgba(85, 158, 226, 0.50);

  --text: #F0F6FC;
  --text-muted: #A3B9CB;
  --text-dim: #8199AD;
  --text-on-primary: #04090E;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 35px var(--primary-glow);
  --shadow-glow-accent: 0 0 35px var(--accent-glow);

  --play-bg: rgba(10, 22, 28, 0.78);
  --play-border: rgba(85, 158, 226, 0.30);
  --apkpure-bg: rgba(14, 26, 38, 0.78);
  --apkpure-border: rgba(56, 189, 248, 0.30);
  --apkpure-accent: #38BDF8;
}

[data-theme="light"] {
  
  --brand-blue: #3A85CE;
  --brand-blue-light: #559EE2;
  --brand-blue-dark: #1E66B0;
  --brand-blue-glow: rgba(58, 133, 206, 0.18);
  --brand-blue-glow-strong: rgba(58, 133, 206, 0.32);
  --brand-blue-muted: rgba(85, 158, 226, 0.12);

  --brand-green: #006233;
  --brand-green-light: #00733F;
  --brand-green-dark: #004524;
  --brand-green-glow: rgba(0, 98, 51, 0.16);
  --brand-green-glow-strong: rgba(0, 98, 51, 0.28);
  --brand-green-muted: rgba(0, 98, 51, 0.08);

  --brand-yellow: #E6A100;
  --brand-yellow-glow: rgba(230, 161, 0, 0.14);
  --brand-yellow-muted: rgba(230, 161, 0, 0.06);

  --primary: #3A85CE;
  --primary-light: #559EE2;
  --primary-dark: #1E66B0;
  --primary-glow: rgba(58, 133, 206, 0.16);
  --primary-glow-strong: rgba(58, 133, 206, 0.28);
  --primary-muted: rgba(85, 158, 226, 0.10);

  --accent: #006233;
  --accent-light: #00733F;
  --accent-dark: #004524;
  --accent-glow: rgba(0, 98, 51, 0.16);
  --accent-muted: rgba(0, 98, 51, 0.08);

  --bg: #F0F6FC;
  --bg2: #E8F2FA;
  --bg3: #E0EEF8;
  --bg-gradient: 
    radial-gradient(at 4% 4%, rgba(85, 158, 226, 0.22) 0px, transparent 50%),
    radial-gradient(at 96% 12%, rgba(0, 135, 68, 0.15) 0px, transparent 48%),
    radial-gradient(at 50% 46%, rgba(85, 158, 226, 0.12) 0px, transparent 55%),
    radial-gradient(at 92% 70%, rgba(255, 212, 0, 0.09) 0px, transparent 42%),
    radial-gradient(at 12% 86%, rgba(0, 135, 68, 0.13) 0px, transparent 48%),
    linear-gradient(180deg, #F0F6FC 0%, #EBF4FC 38%, #E6F3EC 72%, #F0F6FB 100%);

  --surface: rgba(255, 255, 255, 0.55);
  --surface2: rgba(238, 246, 253, 0.65);
  --card-bg: rgba(255, 255, 255, 0.50);
  --nav-bg: rgba(240, 247, 253, 0.65);

  --card-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.62) 100%), rgba(255, 255, 255, 0.5);
  --card-glass-border: rgba(20, 60, 90, 0.14);
  --card-glass-border-subtle: rgba(85, 158, 226, 0.18);
  --card-glass-specular: #FFFFFF;
  --card-glass-shadow: 0 16px 40px -18px rgba(20, 60, 90, 0.28), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  --card-glass-hover-border: rgba(85, 158, 226, 0.50);
  --card-glass-hover-shadow: 0 26px 56px -18px rgba(20, 60, 90, 0.34), 0 0 36px rgba(47, 123, 194, 0.16), inset 0 1px 0 0 #FFFFFF;

  --nav-glass-bg: rgba(240, 247, 253, 0.70);
  --nav-glass-border: rgba(255, 255, 255, 0.90);
  --nav-glass-shadow: 0 14px 35px -6px rgba(10, 30, 45, 0.05), inset 0 1px 0 0 #FFFFFF;

  --gk-grad: linear-gradient(100deg, #1D62A8 0%, #2A76BD 40%, #00733F 100%);
  --gk-eyebrow: #00733F;
  --gk-tile-bg: rgba(47, 123, 194, 0.12);
  --gk-tile-border: rgba(47, 123, 194, 0.4);
  --gk-tile-fg: #1D62A8;
  --gk-soft: rgba(20, 60, 90, 0.05);
  --gk-line: rgba(20, 60, 90, 0.14);
  --gk-ok: #00733F;
  --gk-warn: #9A6B00;
  --gk-bad: #D12E2E;

  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-heavy: blur(28px) saturate(190%);

  --border: rgba(85, 158, 226, 0.16);
  --border-strong: rgba(85, 158, 226, 0.30);
  --border-glass: rgba(255, 255, 255, 0.95);
  --border-glass-hover: rgba(85, 158, 226, 0.45);

  --text: #0D1A24;
  --text-muted: #3F566A;
  --text-dim: #556D81;
  --text-on-primary: #FFFFFF;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.09);
  --shadow-glow: 0 0 35px var(--primary-glow);
  --shadow-glow-accent: 0 0 35px var(--accent-glow);

  --play-bg: rgba(255, 255, 255, 0.92);
  --play-border: rgba(85, 158, 226, 0.25);
  --apkpure-bg: rgba(255, 255, 255, 0.92);
  --apkpure-border: rgba(2, 132, 199, 0.25);
  --apkpure-accent: #0284C7;
}

:root {
  
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  --header-height: 80px;
  --announcement-height: 40px;
  --max-width-site: 1280px;

  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  --min-touch-target: 44px;

  --z-negative: -1;
  --z-elevate: 1;
  --z-sticky: 100;
  --z-drawer: 500;
  --z-header: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}