/* ==========================================================================
   PENIXIO MULTI-THEME DESIGN SYSTEM (themes.css)
   Unified Neo-Brutalist design tokens aligned with penixio_core.js social media deck.
   Covers all 5 visual design directions:
     - Direction A: The Notebook (Stationery / Ruled Lines / Oxford Navy / Teacher Red)
     - Direction B: The Kaleidoscope (Primary Bold Neo-Brutalist Pop / Sunshine / Tomato / Sky)
     - Direction C: The Night Market (OLED Midnight / Luminous Lantern Gold / Neon Crimson / Jade)
     - Direction D: The Pastel Studio (Scandinavian Soft Calm / Blush / Sky / Sage / Butter / Deep Plum)
     - Direction E: The Strategic Hybrid (Kaleidoscope Hero Energy + Multi-Persona Color Morphing)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Default / Direction A: The Notebook
   Scholarly, tactile stationery theme with warm paper, ruled graph lines,
   Oxford navy ink, teacher red annotations, and gold accents.
   -------------------------------------------------------------------------- */
:root,
.theme-notebook {
  --theme-id: notebook;
  --theme-name: 'The Notebook';
  
  /* Core Color Palette */
  --bg-page: #F7F6F1;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #FBF3E1;
  --bg-contrast: #1B2A4A;
  --text-primary: #1B2A4A;
  --text-secondary: #2C3E60;
  --text-muted: #6B7B96;
  --text-on-contrast: #F7F6F1;
  
  /* Accents & Brand Colors */
  --accent-primary: #D6432F;        /* Teacher red */
  --accent-primary-hover: #B7331F;
  --accent-secondary: #C99A3C;      /* Pencil gold */
  --accent-tertiary: #2E7D32;       /* Check green */
  --accent-soft: rgba(214, 67, 47, 0.12);
  --gold-bg: #FBF3E1;
  --gold-border: #1B2A4A;
  --gold-text: #1B2A4A;
  
  /* Borders & Dividers */
  --border-color: #1B2A4A;
  --border-subtle: #DCE2E8;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 999px;
  --card-border-width: 2px;
  
  /* Typography (Unified with Social Media Deck) */
  --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Bebas Neue', 'Oswald', sans-serif;
  --font-handwriting: 'Caveat', cursive, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;
  
  /* Elevation & Hard Cutout Shadows */
  --shadow-sm: 2px 2px 0px #1B2A4A;
  --shadow-md: 4px 4px 0px #1B2A4A;
  --shadow-lg: 6px 6px 0px #1B2A4A;
  --button-shadow: 3px 3px 0px #1B2A4A;
  
  /* Patterns & Textures */
  --page-pattern: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(27, 42, 74, 0.08) 28px),
                  repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(27, 42, 74, 0.08) 28px);
  --page-pattern-size: 28px 28px;
  
  /* Decorative Shapes & Hero Ground */
  --hero-bg: #FBF3E1;
  --shape-1: #D6432F;
  --shape-2: #C99A3C;
  --card-rotation-1: rotate(-0.75deg);
  --card-rotation-2: rotate(0.75deg);
  --pill-bg: #FBF3E1;
  --pill-text: #1B2A4A;
  --pill-border: #1B2A4A;
}

/* --------------------------------------------------------------------------
   Direction B: The Kaleidoscope (Primary Bold)
   High-energy neo-brutalist pop aesthetic directly matching penixio_core.js 'bold' palette.
   Sunshine Yellow, Tomato Orange, Sky Blue, Grass Green, solid #1A1A1A cutout shadows.
   -------------------------------------------------------------------------- */
.theme-kaleidoscope {
  --theme-id: kaleidoscope;
  --theme-name: 'The Kaleidoscope';
  
  /* Core Color Palette */
  --bg-page: #FFFDF0;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #FFE566;        /* Sunshine yellow */
  --bg-contrast: #1A1A1A;
  --text-primary: #1A1A1A;
  --text-secondary: #2D2D2D;
  --text-muted: #555555;
  --text-on-contrast: #FFFFFF;
  
  /* Accents & Brand Colors (Directly matching penixio_core.js) */
  --accent-primary: #FF7043;        /* Tomato orange */
  --accent-primary-hover: #E65100;
  --accent-secondary: #42A5F5;      /* Sky blue */
  --accent-tertiary: #66BB6A;       /* Fresh grass green */
  --accent-soft: #FFE566;
  --gold-bg: #FFE566;
  --gold-border: #1A1A1A;
  --gold-text: #1A1A1A;
  
  /* Specific Color Aliases */
  --pb-sunshine: #FFE566;
  --pb-tomato: #FF7043;
  --pb-sky: #42A5F5;
  --pb-grass: #66BB6A;
  --pb-crimson: #EF5350;
  --pb-orange: #FFA726;
  --pb-purple: #AB47BC;
  --pb-ink: #1A1A1A;
  
  /* Decorative Shapes & Hero Ground */
  --hero-bg: #FFE566;
  --shape-1: #FF7043;
  --shape-2: #42A5F5;
  
  /* Borders & Dividers */
  --border-color: #1A1A1A;
  --border-subtle: #1A1A1A;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 999px;
  --card-border-width: 2.5px;
  
  /* Typography */
  --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Bebas Neue', 'Oswald', sans-serif;
  --font-handwriting: 'Caveat', cursive, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;
  
  /* Elevation & Shadows (Hard Neo-Brutalist Cutouts) */
  --shadow-sm: 2px 2px 0px #1A1A1A;
  --shadow-md: 4px 4px 0px #1A1A1A;
  --shadow-lg: 6px 6px 0px #1A1A1A;
  --button-shadow: 3px 3px 0px #1A1A1A;
  
  /* Patterns & Textures */
  --page-pattern: radial-gradient(#FFE566 16%, transparent 16%);
  --page-pattern-size: 24px 24px;
  
  /* Component-Specific Customizations */
  --card-rotation-1: none;
  --card-rotation-2: none;
  --pill-bg: #FFE566;
  --pill-text: #1A1A1A;
  --pill-border: #1A1A1A;
}

/* --------------------------------------------------------------------------
   Direction T: The Tropical Studio (Electric Punch)
   High-energy neo-brutalist tropical aesthetic directly matching penixio_core.js 'tropical' palette.
   Warm Gold #FFC947, Coral Red #FF6B6B, Teal Mint #00C9A7, Lime #A8E063, Tangerine #FF8B5E, Bright Cyan #4FC3F7.
   -------------------------------------------------------------------------- */
.theme-tropical {
  --theme-id: tropical;
  --theme-name: 'The Tropical Studio';
  
  /* Core Color Palette */
  --bg-page: #FFFEEA;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #FFC947;        /* Warm Gold */
  --bg-contrast: #1A1A1A;
  --text-primary: #1A1A1A;
  --text-secondary: #2D2D2D;
  --text-muted: #4A5568;
  --text-on-contrast: #FFFFFF;
  
  /* Accents & Brand Colors (Directly matching penixio_core.js tropical palette) */
  --accent-primary: #FF6B6B;        /* Coral Red */
  --accent-primary-hover: #E04848;
  --accent-secondary: #00C9A7;      /* Teal Mint */
  --accent-tertiary: #A8E063;       /* Lime Green */
  --accent-tangerine: #FF8B5E;      /* Tangerine Orange */
  --accent-cyan: #4FC3F7;           /* Bright Cyan */
  --accent-soft: #FFC947;
  --gold-bg: #FFC947;
  --gold-border: #1A1A1A;
  --gold-text: #1A1A1A;
  
  /* Specific Color Aliases */
  --tp-gold: #FFC947;
  --tp-coral: #FF6B6B;
  --tp-teal: #00C9A7;
  --tp-lime: #A8E063;
  --tp-tangerine: #FF8B5E;
  --tp-cyan: #4FC3F7;
  --tp-ink: #1A1A1A;
  
  /* Decorative Shapes & Hero Ground */
  --hero-bg: #FFC947;
  --shape-1: #FF6B6B;
  --shape-2: #00C9A7;
  
  /* Borders & Dividers */
  --border-color: #1A1A1A;
  --border-subtle: #1A1A1A;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 999px;
  --card-border-width: 2.5px;
  
  /* Typography */
  --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Bebas Neue', 'Oswald', sans-serif;
  --font-handwriting: 'Caveat', cursive, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;
  
  /* Elevation & Shadows (Hard Neo-Brutalist Cutouts) */
  --shadow-sm: 2px 2px 0px #1A1A1A;
  --shadow-md: 4px 4px 0px #1A1A1A;
  --shadow-lg: 6px 6px 0px #1A1A1A;
  --button-shadow: 3px 3px 0px #1A1A1A;
  
  /* Patterns & Textures */
  --page-pattern: radial-gradient(#00C9A7 16%, transparent 16%);
  --page-pattern-size: 24px 24px;
  
  /* Component-Specific Customizations */
  --card-rotation-1: none;
  --card-rotation-2: none;
  --pill-bg: #FFC947;
  --pill-text: #1A1A1A;
  --pill-border: #1A1A1A;
}

/* --------------------------------------------------------------------------
   Direction C: The Night Market
   Immersive midnight dark mode directly matching penixio_core.js 'nightmarket' palette.
   Midnight #1A1035, Radiant Gold #FFD166, Neon Crimson #EF476F, Jade #06D6A0, Cobalt #118AB2.
   -------------------------------------------------------------------------- */
.theme-nightmarket {
  --theme-id: nightmarket;
  --theme-name: 'The Night Market';
  
  /* Core Color Palette */
  --bg-page: #1A1035;
  --bg-surface: #241747;
  --bg-surface-alt: #2E1D5C;
  --bg-contrast: #FFD166;
  --text-primary: #F8F9FA;
  --text-secondary: #D1D5E0;
  --text-muted: #8E92B2;
  --text-on-contrast: #1A1035;
  
  /* Accents & Brand Colors */
  --accent-primary: #FFD166;        /* Radiant Gold */
  --accent-primary-hover: #FFC038;
  --accent-secondary: #EF476F;      /* Neon Crimson */
  --accent-tertiary: #06D6A0;       /* Jade Mint */
  --accent-soft: rgba(255, 209, 102, 0.18);
  --gold-bg: #FFD166;
  --gold-border: #FFD166;
  --gold-text: #1A1035;
  
  /* Specific Color Aliases */
  --nm-midnight: #1A1035;
  --nm-surface: #241747;
  --nm-gold: #FFD166;
  --nm-crimson: #EF476F;
  --nm-jade: #06D6A0;
  --nm-cobalt: #118AB2;
  
  /* Decorative Shapes & Hero Ground */
  --hero-bg: #1A1035;
  --shape-1: #FFD166;
  --shape-2: #118AB2;
  
  /* Borders & Dividers */
  --border-color: #FFD166;
  --border-subtle: #38246E;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 14px;
  --border-radius-pill: 999px;
  --card-border-width: 2px;
  
  /* Typography */
  --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Bebas Neue', 'Oswald', sans-serif;
  --font-handwriting: 'Caveat', cursive, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;
  
  /* Elevation & Shadows (Luminous Hard Cutouts) */
  --shadow-sm: 2px 2px 0px #FFD166;
  --shadow-md: 4px 4px 0px #FFD166;
  --shadow-lg: 6px 6px 0px #FFD166;
  --button-shadow: 3px 3px 0px #FFD166;
  
  /* Patterns & Textures */
  --page-pattern: radial-gradient(rgba(255, 209, 102, 0.08) 1.5px, transparent 1.5px);
  --page-pattern-size: 28px 28px;
  
  /* Component-Specific Customizations */
  --card-rotation-1: none;
  --card-rotation-2: none;
  --pill-bg: #FFD166;
  --pill-text: #1A1035;
  --pill-border: #FFD166;
}

/* --------------------------------------------------------------------------
   Direction D: The Pastel Studio
   Scandinavian calm directly matching penixio_core.js 'pastel' palette.
   Blush #FFD6E0, Baby Sky #C5E8F7, Lavender #E8D5F5, Sage #C3F0CA, Butter #FFF0C1, Deep Plum #3D2B5C.
   -------------------------------------------------------------------------- */
.theme-pastel {
  --theme-id: pastel;
  --theme-name: 'The Pastel Studio';
  
  /* Core Color Palette */
  --bg-page: #FAF8F5;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #FFF0C1;        /* Soft butter */
  --bg-contrast: #3D2B5C;
  --text-primary: #3D2B5C;          /* Deep Plum */
  --text-secondary: #564075;        /* Plum slate */
  --text-muted: #84739E;
  --text-on-contrast: #FAF8F5;
  
  /* Accents & Brand Colors */
  --accent-primary: #7C5295;        /* Velvet plum */
  --accent-primary-hover: #633E78;
  --accent-secondary: #C5E8F7;      /* Sky */
  --accent-tertiary: #C3F0CA;       /* Sage */
  --accent-blush: #FFD6E0;          /* Blush */
  --accent-butter: #FFF0C1;         /* Butter */
  --accent-soft: rgba(124, 82, 149, 0.12);
  --gold-bg: #FFF0C1;
  --gold-border: #3D2B5C;
  --gold-text: #3D2B5C;
  
  /* Specific Color Aliases */
  --ps-plum: #3D2B5C;
  --ps-blush: #FFD6E0;
  --ps-sky: #C5E8F7;
  --ps-sage: #C3F0CA;
  --ps-butter: #FFF0C1;
  --ps-lavender: #E8D5F5;
  
  /* Decorative Shapes & Hero Ground */
  --hero-bg: #FFD6E0;
  --shape-1: #FFB7C3;
  --shape-2: #C3F0CA;
  
  /* Borders & Dividers */
  --border-color: #3D2B5C;
  --border-subtle: #EBDDE8;
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 14px;
  --border-radius-pill: 999px;
  --card-border-width: 2px;
  
  /* Typography */
  --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Bebas Neue', 'Oswald', sans-serif;
  --font-handwriting: 'Caveat', cursive, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;
  
  /* Elevation & Shadows (Deep Plum Cutouts) */
  --shadow-sm: 2px 2px 0px #3D2B5C;
  --shadow-md: 4px 4px 0px #3D2B5C;
  --shadow-lg: 6px 6px 0px #3D2B5C;
  --button-shadow: 3px 3px 0px #3D2B5C;
  
  /* Patterns & Textures */
  --page-pattern: radial-gradient(rgba(61, 43, 92, 0.08) 1.5px, transparent 1.5px);
  --page-pattern-size: 24px 24px;
  
  /* Component-Specific Customizations */
  --card-rotation-1: none;
  --card-rotation-2: none;
  --pill-bg: #FFD6E0;
  --pill-text: #3D2B5C;
  --pill-border: #3D2B5C;
}

/* --------------------------------------------------------------------------
   Direction E: The Strategic Hybrid
   High-converting hybrid pairing Kaleidoscope hero energy + Notebook structure
   with audience-tailored color accents.
   -------------------------------------------------------------------------- */
.theme-hybrid {
  --theme-id: hybrid;
  --theme-name: 'The Strategic Hybrid';
  
  /* Core Color Palette */
  --bg-page: #F8F9FA;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #FFE566;
  --bg-contrast: #152238;
  --text-primary: #152238;
  --text-secondary: #2C3D5A;
  --text-muted: #6B7B96;
  --text-on-contrast: #FFFFFF;
  
  /* Accents & Brand Colors */
  --accent-primary: #D6432F;        /* Focal red */
  --accent-primary-hover: #B7331F;
  --accent-secondary: #FFE566;      /* Sunshine highlight yellow */
  --accent-tertiary: #42A5F5;       /* Dynamic sky blue */
  --accent-soft: rgba(214, 67, 47, 0.12);
  --gold-bg: #FFE566;
  --gold-border: #152238;
  --gold-text: #152238;
  
  /* Specific Color Aliases */
  --hybrid-navy: #152238;
  --hybrid-red: #D6432F;
  --hybrid-yellow: #FFE566;
  --hybrid-blue: #42A5F5;
  
  /* Decorative Shapes & Hero Ground */
  --hero-bg: #FFE566;
  --shape-1: #D6432F;
  --shape-2: #42A5F5;
  
  /* Borders & Dividers */
  --border-color: #152238;
  --border-subtle: #D3DCE6;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 999px;
  --card-border-width: 2.5px;
  
  /* Typography */
  --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Bebas Neue', 'Oswald', sans-serif;
  --font-handwriting: 'Caveat', cursive, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;
  
  /* Elevation & Shadows */
  --shadow-sm: 2px 2px 0px #152238;
  --shadow-md: 4px 4px 0px #152238;
  --shadow-lg: 6px 6px 0px #152238;
  --button-shadow: 3px 3px 0px #152238;
  
  /* Patterns & Textures */
  --page-pattern: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(21, 34, 56, 0.06) 28px);
  --page-pattern-size: 28px 28px;
  
  /* Component-Specific Customizations */
  --card-rotation-1: rotate(-0.5deg);
  --card-rotation-2: rotate(0.5deg);
  --pill-bg: #FFE566;
  --pill-text: #152238;
  --pill-border: #152238;
}

/* --------------------------------------------------------------------------
   Global Layout & Typography Bindings
   -------------------------------------------------------------------------- */
body {
  background-color: var(--bg-page);
  background-image: var(--page-pattern);
  background-size: var(--page-pattern-size, auto);
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: var(--font-heading);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0.02em;
}

.font-accent {
  font-family: var(--font-accent);
}

.font-handwriting,
.handwritten {
  font-family: var(--font-handwriting);
}