/* ============================================
   ITEMMAP LANDING PAGE - THEME DEFINITIONS
   Three distinct visual identities via CSS custom properties
   ============================================ */

/* ============================================
   THEME A: MAGIC (Enchanted Grimoire)

   Direction: Ancient magic meets modern wonder
   - Aged parchment textures, luminous gold accents
   - Floating, hovering elements with soft shadows
   - Deep purple ink on warm paper
   - Typography: Fraunces (quirky display serif) + DM Sans
   ============================================ */
:root,
[data-theme="magic"] {
  /* Core Palette */
  --color-primary: #4A2C6A;           /* Deep purple ink */
  --color-primary-light: #6B4D8A;
  --color-primary-rgb: 74, 44, 106;

  --color-secondary: #2D5A5A;         /* Forest teal */
  --color-secondary-light: #3D7A7A;

  --color-accent: #D4A853;            /* Burnished gold */
  --color-accent-glow: rgba(212, 168, 83, 0.4);
  --color-accent-bright: #E8C068;

  /* Backgrounds */
  --color-bg: #F7F3EB;                /* Aged parchment */
  --color-bg-alt: #EDE7DB;            /* Deeper parchment */
  --color-bg-card: rgba(255, 252, 245, 0.7);
  --color-bg-rgb: 247, 243, 235;

  /* Text */
  --color-text: #2A2438;              /* Purple-black ink */
  --color-text-muted: #5D5470;
  --color-text-light: #8A8299;

  /* Semantic */
  --color-success: #4A7C6F;
  --color-highlight: #C7A4D9;         /* Soft amethyst */

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-weight-display: 600;

  /* Effects */
  --shadow-soft: 0 4px 20px rgba(74, 44, 106, 0.08);
  --shadow-float: 0 12px 40px rgba(74, 44, 106, 0.12), 0 4px 12px rgba(74, 44, 106, 0.08);
  --shadow-glow: 0 0 30px var(--color-accent-glow);

  /* Borders & Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Gradients */
  --gradient-hero: linear-gradient(165deg, #F7F3EB 0%, #EDE7DB 50%, #E5DFD3 100%);
  --gradient-accent: linear-gradient(135deg, #D4A853 0%, #E8C068 50%, #D4A853 100%);
  --gradient-overlay: linear-gradient(180deg, transparent 0%, rgba(74, 44, 106, 0.03) 100%);

  /* Theme-specific */
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ============================================
   THEME B: COZY (Editorial Sanctuary)

   Direction: Luxury magazine meets Scandinavian calm
   - Oversized editorial typography
   - Asymmetric, art-directed layouts
   - Warm neutrals with coral punch
   - Typography: Cormorant Garamond (elegant serif) + Outfit
   ============================================ */
[data-theme="cozy"] {
  /* Core Palette */
  --color-primary: #3D4F4A;           /* Deep sage */
  --color-primary-light: #5A6F68;
  --color-primary-rgb: 61, 79, 74;

  --color-secondary: #E8DCC8;         /* Warm linen */
  --color-secondary-light: #F2EAD9;

  --color-accent: #D66853;            /* Terracotta coral */
  --color-accent-glow: rgba(214, 104, 83, 0.3);
  --color-accent-bright: #E07A65;

  /* Backgrounds */
  --color-bg: #FDFBF8;                /* Warm white */
  --color-bg-alt: #F5F0E8;            /* Soft cream */
  --color-bg-card: #FFFFFF;
  --color-bg-rgb: 253, 251, 248;

  /* Text */
  --color-text: #2C2C2C;              /* Warm charcoal */
  --color-text-muted: #6B6560;
  --color-text-light: #9A948D;

  /* Semantic */
  --color-success: #5A7F6F;
  --color-highlight: #F0E2C8;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-weight-display: 500;

  /* Effects */
  --shadow-soft: 0 2px 12px rgba(61, 79, 74, 0.06);
  --shadow-float: 0 8px 30px rgba(61, 79, 74, 0.08);
  --shadow-glow: none;

  /* Borders & Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Gradients */
  --gradient-hero: linear-gradient(180deg, #FDFBF8 0%, #F5F0E8 100%);
  --gradient-accent: linear-gradient(135deg, #D66853 0%, #E07A65 100%);
  --gradient-overlay: none;

  /* Theme-specific */
  --texture-noise: none;
  --border-editorial: 1px solid rgba(61, 79, 74, 0.1);
}

/* ============================================
   THEME C: HIGH-TECH (Mission Control Noir)

   Direction: NASA meets cyberpunk cinema
   - Terminal aesthetics, scan lines, data viz
   - Monospace + condensed bold typography
   - Electric blue with warning orange
   - Typography: JetBrains Mono + Archivo
   ============================================ */
[data-theme="hightech"] {
  /* Core Palette */
  --color-primary: #0066FF;           /* Electric blue */
  --color-primary-light: #3385FF;
  --color-primary-dark: #0052CC;
  --color-primary-rgb: 0, 102, 255;

  --color-secondary: #FF6B2C;         /* Warning orange */
  --color-secondary-light: #FF8552;
  --color-secondary-glow: rgba(255, 107, 44, 0.4);

  --color-accent: #00D4AA;            /* System cyan */
  --color-accent-glow: rgba(0, 212, 170, 0.3);
  --color-accent-bright: #00F5C4;

  /* Backgrounds */
  --color-bg: #0A0E14;                /* Deep space */
  --color-bg-alt: #12181F;            /* Panel dark */
  --color-bg-card: rgba(18, 24, 31, 0.8);
  --color-bg-elevated: #1A222D;
  --color-bg-rgb: 10, 14, 20;

  /* Text */
  --color-text: #E8ECF0;              /* Terminal white */
  --color-text-muted: #8A96A3;
  --color-text-light: #5C6773;

  /* Semantic */
  --color-success: #00D68F;
  --color-warning: #FFB800;
  --color-highlight: rgba(0, 102, 255, 0.15);

  /* Typography */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-weight-display: 800;

  /* Effects */
  --shadow-soft: 0 4px 20px rgba(0, 102, 255, 0.1);
  --shadow-float: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 102, 255, 0.1);
  --shadow-glow: 0 0 40px rgba(0, 102, 255, 0.3);

  /* Borders & Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Gradients */
  --gradient-hero: linear-gradient(180deg, #0A0E14 0%, #12181F 100%);
  --gradient-accent: linear-gradient(135deg, #FF6B2C 0%, #FF8552 100%);
  --gradient-overlay: linear-gradient(180deg, transparent 0%, rgba(0, 102, 255, 0.02) 100%);
  --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(0, 102, 255, 0.15) 0%, transparent 60%);

  /* Theme-specific */
  --grid-color: rgba(0, 102, 255, 0.07);
  --scanline-opacity: 0.03;
}

/* ============================================
   SHARED FONT IMPORTS
   ============================================ */
/*
  Fonts loaded via HTML <link> tags for performance:
  - Fraunces (Magic display)
  - DM Sans (Magic body)
  - Cormorant Garamond (Cozy display)
  - Outfit (Cozy body)
  - Archivo (High-tech display/body)
  - JetBrains Mono (High-tech mono)
*/