:root {
  /* ═══════════════════════════════════════════════════════════
     BRAND COLORS - Suomi-Kasino.ai (PINK/PURPLE PALETTE)
     #B1235B, #DF428E, #85143E, #2E0E62, #4A1FA1, #4E0A31
     ═══════════════════════════════════════════════════════════ */
  --color-primary: #2E0E62;
  --color-secondary: #4E0A31;
  --color-accent: #B1235B;
  --color-accent-light: #DF428E;
  --color-accent-dark: #85143E;
  --color-purple: #4A1FA1;

  /* RGB versions for rgba() */
  --color-primary-rgb: 46, 14, 98;
  --color-secondary-rgb: 78, 10, 49;
  --color-accent-rgb: 177, 35, 91;
  --color-accent-light-rgb: 223, 66, 142;
  --color-accent-dark-rgb: 133, 20, 62;
  --color-purple-rgb: 74, 31, 161;

  /* Text colors */
  --color-text: #F5F0F7;
  --color-text-secondary: rgba(245, 240, 247, 0.8);
  --color-text-muted: rgba(245, 240, 247, 0.6);
  --color-text-light: rgba(245, 240, 247, 0.4);
  --color-text-inverse: #2E0E62;

  /* ═══════════════════════════════════════════════════════════
     SECTION BACKGROUNDS - Pink/Purple Theme
     ═══════════════════════════════════════════════════════════ */

  /* ─── HERO ─────────────────────────────────────────────────
     Deep purple base with pink accent glow
  */
  --hero-base: linear-gradient(165deg, #2E0E62 0%, #4E0A31 50%, #2E0E62 100%);
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(177, 35, 91, 0.2) 0%, transparent 60%);
  --hero-vignette: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 30%, rgba(20, 6, 40, 0.5) 100%);

  /* ─── CATEGORIES ───────────────────────────────────────────
     Lighter purple with pink accents
  */
  --categories-base: linear-gradient(135deg, #4A1FA1 0%, #5a2db8 30%, #6a3bcf 50%, #5a2db8 70%, #4A1FA1 100%);
  --categories-glow: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(223, 66, 142, 0.3) 0%, rgba(177, 35, 91, 0.15) 40%, transparent 70%), radial-gradient(ellipse 100% 60% at 50% 100%, rgba(106, 59, 207, 0.25) 0%, transparent 50%);

  /* ─── CAROUSEL ─────────────────────────────────────────────
     Horizontal with burgundy tones
  */
  --carousel-base: linear-gradient(90deg, #1f0845 0%, #2E0E62 25%, #2E0E62 75%, #1f0845 100%);

  /* ─── ARTICLES ─────────────────────────────────────────────
     Diagonal with subtle purple glow
  */
  --articles-base: linear-gradient(160deg, #2E0E62 0%, #3d1278 40%, #2E0E62 100%);
  --articles-glow: radial-gradient(ellipse 60% 40% at 20% 20%, rgba(74, 31, 161, 0.15) 0%, transparent 50%);

  /* ─── TAGS ─────────────────────────────────────────────────
     Vibrant purple-pink gradient
  */
  --tags-base: linear-gradient(135deg, #1a0a2e 0%, #2E0E62 20%, #4A1FA1 50%, #2E0E62 80%, #1a0a2e 100%);
  --tags-center: radial-gradient(ellipse 100% 80% at 50% 30%, rgba(177, 35, 91, 0.4) 0%, rgba(223, 66, 142, 0.15) 50%, transparent 80%);

  /* ─── SEO / TEXT SECTION ───────────────────────────────────
     Very calm for reading
  */
  --seo-base: linear-gradient(180deg, #1f0845 0%, #2E0E62 40%, #2E0E62 60%, #1f0845 100%);

  /* ─── CTA / CONTACT ────────────────────────────────────────
     Higher contrast with pink glow
  */
  --cta-base: linear-gradient(135deg, #3a1172 0%, #4E0A31 50%, #3a1172 100%);
  --cta-glow: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(223, 66, 142, 0.2) 0%, transparent 60%);

  /* ─── RELATED SECTION ──────────────────────────────────────
     Inverted direction
  */
  --related-base: linear-gradient(180deg, #1f0845 0%, #2E0E62 50%, #3a1172 100%);

  /* ─── PAGE HERO (Internal pages) ───────────────────────────
     Softer than home hero
  */
  --page-hero-base: linear-gradient(180deg, #4A1FA1 0%, #2E0E62 70%, #1f0845 100%);
  --page-hero-glow: radial-gradient(ellipse 60% 40% at 50% 20%, rgba(223, 66, 142, 0.15) 0%, transparent 50%);

  /* ─── FOOTER ───────────────────────────────────────────────
     Darkest
  */
  --footer-base: linear-gradient(180deg, #1f0845 0%, #150530 50%, #0d0320 100%);

  /* ─── CARDS ───────────────────────────────────────────────
     Glass-like with purple/burgundy
  */
  --card-bg: rgba(74, 31, 161, 0.2);
  --card-bg-hover: rgba(74, 31, 161, 0.35);
  --card-glass: linear-gradient(160deg, rgba(74, 31, 161, 0.25) 0%, rgba(78, 10, 49, 0.3) 100%);
  --card-glass-hover: linear-gradient(160deg, rgba(74, 31, 161, 0.4) 0%, rgba(78, 10, 49, 0.45) 100%);
  --card-solid: rgba(58, 17, 114, 0.6);

  /* ─── MODAL ────────────────────────────────────────────────
  */
  --modal-bg: linear-gradient(180deg, rgba(58, 17, 114, 0.98) 0%, rgba(46, 14, 98, 0.99) 100%);

  /* ═══════════════════════════════════════════════════════════
     BACKGROUNDS
     ═══════════════════════════════════════════════════════════ */
  --color-bg: #2E0E62;
  --color-bg-alt: #3a1172;
  --color-bg-subtle: #4A1FA1;
  --color-bg-card: rgba(74, 31, 161, 0.25);
  --color-bg-dark: #1f0845;
  --color-bg-dark-alt: #150530;

  /* ═══════════════════════════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════════════════════════ */
  --color-border: rgba(223, 66, 142, 0.2);
  --color-border-light: rgba(223, 66, 142, 0.1);
  --color-border-dark: rgba(255, 255, 255, 0.08);
  --color-border-accent: rgba(177, 35, 91, 0.4);

  /* ═══════════════════════════════════════════════════════════
     SUBTLE PATTERNS
     ═══════════════════════════════════════════════════════════ */

  /* Subtle dot pattern - 3% opacity dots */
  --pattern-dots: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23DF428E' fill-opacity='0.03'/%3E%3C/svg%3E");

  /* Subtle line pattern - 2% opacity */
  --pattern-lines: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40L40 0' stroke='%23DF428E' stroke-opacity='0.02' stroke-width='1'/%3E%3C/svg%3E");

  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════ */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;
  --text-7xl: 6rem;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ═══════════════════════════════════════════════════════════
     SPACING
     ═══════════════════════════════════════════════════════════ */
  --space-0: 0;
  --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-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* Section Spacing */
  --section-y: clamp(5rem, 10vw, 10rem);
  --section-y-sm: clamp(3rem, 6vw, 6rem);

  /* ═══════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
  --container-padding: clamp(1.5rem, 5vw, 3rem);

  /* ═══════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════ */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════ */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

  /* Colored glow shadows */
  --shadow-glow-primary: 0 0 60px -15px rgba(var(--color-accent-rgb), 0.5);
  --shadow-glow-accent: 0 0 40px -10px rgba(var(--color-accent-light-rgb), 0.4);
  --shadow-glow-purple: 0 0 40px -10px rgba(var(--color-purple-rgb), 0.4);
  --shadow-inner-glow: inset 0 0 60px rgba(var(--color-accent-rgb), 0.1);

  /* ═══════════════════════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════════════════════ */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  --transition-fast: var(--duration-150) var(--ease-out);
  --transition-base: var(--duration-200) var(--ease-out);
  --transition-slow: var(--duration-300) var(--ease-out);
  --transition-slower: var(--duration-500) var(--ease-out);

  /* ═══════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════ */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
}