/* Regional Theme Overrides
   Customize UI based on cultural and regional preferences
*/

/* ===== US THEME ===== */
html[data-region="US"] {
  --regional-primary: #C9A86A;
  --regional-secondary: #F39C12;
  --regional-bg: #F8F6F2;
  --regional-text: #1A1A1A;
  --regional-spacing: 1;
  --regional-density: normal;
}

/* ===== EU THEME ===== */
html[data-region="EU"],
html[data-region="FR"] {
  --regional-primary: #8B7355;
  --regional-secondary: #D4AF37;
  --regional-bg: #F5F5F0;
  --regional-text: #2C2C2C;
  --regional-spacing: 0.9;
  --regional-density: compact;
}

/* ===== UK THEME ===== */
html[data-region="UK"] {
  --regional-primary: #B8860B;
  --regional-secondary: #DAA520;
  --regional-bg: #F9F7F4;
  --regional-text: #1C1C1C;
  --regional-spacing: 0.95;
  --regional-density: normal;
}

/* ===== INDIA THEME ===== */
html[data-region="IN"] {
  --regional-primary: #FF6B35;
  --regional-secondary: #FFA500;
  --regional-bg: #FEF8E7;
  --regional-text: #1F1F1F;
  --regional-spacing: 0.8;
  --regional-density: compact;
}

/* ===== CHINA THEME ===== */
html[data-region="CN"] {
  --regional-primary: #DC143C;
  --regional-secondary: #FFD700;
  --regional-bg: #FFFEF0;
  --regional-text: #1A1A1A;
  --regional-spacing: 0.75;
  --regional-density: compact;
}

/* ===== JAPAN THEME ===== */
html[data-region="JP"] {
  --regional-primary: #A91E10;
  --regional-secondary: #FFA500;
  --regional-bg: #FAF8F3;
  --regional-text: #2C2C2C;
  --regional-spacing: 0.85;
  --regional-density: compact;
}

/* ===== SPACING ADJUSTMENTS ===== */
html[data-region="IN"] .card,
html[data-region="CN"] .card,
html[data-region="JP"] .card {
  padding: calc(var(--space-4) * 0.8);
}

html[data-region="EU"] .card,
html[data-region="FR"] .card,
html[data-region="UK"] .card {
  padding: calc(var(--space-4) * 0.9);
}

html[data-region="US"] .card {
  padding: var(--space-4);
}

/* ===== CATEGORY TILE DENSITY ===== */
html[data-region="IN"] .category-tile,
html[data-region="CN"] .category-tile,
html[data-region="JP"] .category-tile {
  margin: calc(var(--space-2) * 0.8);
  padding: calc(var(--space-3) * 0.8);
}

html[data-region="EU"] .category-tile,
html[data-region="FR"] .category-tile {
  margin: calc(var(--space-2) * 0.9);
  padding: calc(var(--space-3) * 0.9);
}

/* ===== ICON STYLES ===== */
/* Flat style (US) */
html[data-region="US"] .icon {
  filter: none;
}

/* Minimal style (EU, FR) */
html[data-region="EU"] .icon,
html[data-region="FR"] .icon {
  stroke-width: 1.5;
  opacity: 0.85;
}

/* Bold style (IN, CN) */
html[data-region="IN"] .icon,
html[data-region="CN"] .icon {
  stroke-width: 2.5;
  font-weight: bold;
}

/* Minimal refined style (JP) */
html[data-region="JP"] .icon {
  stroke-width: 1.5;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* ===== BUTTON SIZING BY REGION ===== */
html[data-region="IN"] .btn,
html[data-region="CN"] .btn,
html[data-region="JP"] .btn {
  padding: 0.625rem 1rem;
  font-size: 0.9rem;
}

html[data-region="EU"] .btn,
html[data-region="FR"] .btn {
  padding: 0.75rem 1.25rem;
}

html[data-region="US"] .btn,
html[data-region="UK"] .btn {
  padding: 0.875rem 1.5rem;
}

/* ===== FONT WEIGHTS ===== */
/* Light headings (EU, FR, JP) */
html[data-region="EU"] h1,
html[data-region="EU"] h2,
html[data-region="EU"] h3,
html[data-region="FR"] h1,
html[data-region="FR"] h2,
html[data-region="FR"] h3,
html[data-region="JP"] h1,
html[data-region="JP"] h2,
html[data-region="JP"] h3 {
  font-weight: 600;
}

/* Medium headings (US, UK) */
html[data-region="US"] h1,
html[data-region="US"] h2,
html[data-region="US"] h3,
html[data-region="UK"] h1,
html[data-region="UK"] h2,
html[data-region="UK"] h3 {
  font-weight: 700;
}

/* Bold headings (IN, CN) */
html[data-region="IN"] h1,
html[data-region="IN"] h2,
html[data-region="IN"] h3,
html[data-region="CN"] h1,
html[data-region="CN"] h2,
html[data-region="CN"] h3 {
  font-weight: 700;
}

/* ===== BODY TEXT WEIGHT ===== */
html[data-region="IN"] body,
html[data-region="CN"] body {
  font-weight: 500;
}

html[data-region="EU"] body,
html[data-region="FR"] body,
html[data-region="JP"] body {
  font-weight: 400;
}

/* ===== RESULT CARD DENSITY ===== */
/* Compact cards for Asia-Pacific regions */
html[data-region="IN"] .result-card,
html[data-region="CN"] .result-card,
html[data-region="JP"] .result-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: calc(var(--space-3) * 0.8);
  padding: calc(var(--space-3) * 0.8);
  margin-bottom: calc(var(--space-2) * 0.8);
}

/* Normal density for Western regions */
html[data-region="US"] .result-card,
html[data-region="UK"] .result-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

html[data-region="EU"] .result-card,
html[data-region="FR"] .result-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: calc(var(--space-4) * 0.9);
  padding: calc(var(--space-4) * 0.9);
  margin-bottom: calc(var(--space-3) * 0.9);
}

/* ===== COLOR ACCENT USAGE ===== */
html[data-region="US"] .accent-text { color: #C9A86A; }
html[data-region="EU"] .accent-text { color: #8B7355; }
html[data-region="UK"] .accent-text { color: #B8860B; }
html[data-region="IN"] .accent-text { color: #FF6B35; }
html[data-region="CN"] .accent-text { color: #DC143C; }
html[data-region="JP"] .accent-text { color: #A91E10; }
html[data-region="FR"] .accent-text { color: #8B7355; }

/* ===== BUTTON PRIMARY COLOR ===== */
html[data-region="US"] .btn-primary { background: linear-gradient(135deg, #C9A86A 0%, #B9985A 100%); }
html[data-region="EU"] .btn-primary { background: linear-gradient(135deg, #8B7355 0%, #6B5345 100%); }
html[data-region="UK"] .btn-primary { background: linear-gradient(135deg, #B8860B 0%, #9B6F0A 100%); }
html[data-region="IN"] .btn-primary { background: linear-gradient(135deg, #FF6B35 0%, #E55A25 100%); }
html[data-region="CN"] .btn-primary { background: linear-gradient(135deg, #DC143C 0%, #C41430 100%); }
html[data-region="JP"] .btn-primary { background: linear-gradient(135deg, #A91E10 0%, #921A0D 100%); }
html[data-region="FR"] .btn-primary { background: linear-gradient(135deg, #8B7355 0%, #6B5345 100%); }

/* ===== BORDER COLORS ===== */
html[data-region="US"] .border-accent { border-color: rgba(201, 168, 106, 0.3); }
html[data-region="EU"] .border-accent { border-color: rgba(139, 115, 85, 0.3); }
html[data-region="UK"] .border-accent { border-color: rgba(184, 134, 11, 0.3); }
html[data-region="IN"] .border-accent { border-color: rgba(255, 107, 53, 0.3); }
html[data-region="CN"] .border-accent { border-color: rgba(220, 20, 60, 0.3); }
html[data-region="JP"] .border-accent { border-color: rgba(169, 30, 16, 0.3); }
html[data-region="FR"] .border-accent { border-color: rgba(139, 115, 85, 0.3); }

/* ===== BACKGROUND COLORS ===== */
html[data-region="US"] body { background-color: #F8F6F2; }
html[data-region="EU"] body { background-color: #F5F5F0; }
html[data-region="UK"] body { background-color: #F9F7F4; }
html[data-region="IN"] body { background-color: #FEF8E7; }
html[data-region="CN"] body { background-color: #FFFEF0; }
html[data-region="JP"] body { background-color: #FAF8F3; }
html[data-region="FR"] body { background-color: #F5F5F0; }

/* ===== CATEGORY GRID COLUMNS ===== */
/* More compact grid for compact regions */
@media (min-width: 768px) {
  html[data-region="IN"] .category-grid,
  html[data-region="CN"] .category-grid,
  html[data-region="JP"] .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  html[data-region="EU"] .category-grid,
  html[data-region="FR"] .category-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  html[data-region="US"] .category-grid,
  html[data-region="UK"] .category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ===== HERO SECTION DENSITY ===== */
html[data-region="IN"] .hero-premium,
html[data-region="CN"] .hero-premium,
html[data-region="JP"] .hero-premium {
  padding: 3rem 1rem;
}

html[data-region="EU"] .hero-premium,
html[data-region="FR"] .hero-premium,
html[data-region="UK"] .hero-premium {
  padding: 4rem 1.5rem;
}

html[data-region="US"] .hero-premium {
  padding: 6rem 2rem;
}

/* ===== HEADING SIZES BY REGION ===== */
html[data-region="IN"] h1,
html[data-region="CN"] h1,
html[data-region="JP"] h1 {
  font-size: 2.5rem;
}

html[data-region="EU"] h1,
html[data-region="FR"] h1,
html[data-region="UK"] h1 {
  font-size: 2.8rem;
}

html[data-region="US"] h1 {
  font-size: 3.5rem;
}