/* ============================================================
   4Naple — themes.css
   Theme values only. Light is the default; dark overrides the
   same variables. All components read these variables.
   ============================================================ */

:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --color-bg:            #f7f8fb;
  --color-surface:       #ffffff;
  --color-surface-alt:   #f1f3f8;

  /* Text */
  --color-text:          #171a26;
  --color-text-soft:     #5a6072;
  --color-text-inverse:  #ffffff;
  --color-bg-inverse:    #171a26;

  /* Borders & dividers */
  --color-border:        #e4e7ef;
  --color-border-strong: #c8cdda;

  /* Brand + interaction — Primary Red #B5140F */
  --color-primary:       #b5140f;
  --color-primary-hover: #8f0f0b;
  --color-link:          #b5140f;
  --color-hover:         #f6efee;
  --color-focus-ring:    #b5140f;
  --color-scrim:         rgba(18, 21, 34, 0.45);

  /* Hero (over imagery — always dark text-light tint) */
  --color-hero-kicker:        #fbe3e1;
  --color-hero-badge:         rgba(30, 24, 22, 0.45);
  --color-hero-badge-border:  rgba(255, 255, 255, 0.28);
  --color-hero-text:          #fdf1f0;
  --color-hero-fade:          #2a1a18;
  --color-hero-dots-bg:       rgba(24, 12, 10, 0.45);
  --color-hero-dot:           rgba(255, 255, 255, 0.45);

  /* Floating shadows (light theme) */
  --shadow-float: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.07), 0 32px 64px rgba(15, 23, 42, 0.10);
  --shadow-btn: 0 2px 4px rgba(15, 23, 42, 0.08), 0 8px 20px rgba(181, 20, 15, 0.18);
  --shadow-btn-secondary: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 18px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — true dark, layered for depth */
  --color-bg:            #0a0a0c;
  --color-surface:       #121216;
  --color-surface-alt:   #16161b;

  /* Text — high contrast, clean white */
  --color-text:          #f5f5f6;
  --color-text-soft:     #a6a6ad;
  --color-text-inverse:  #0a0a0c;
  --color-bg-inverse:    #f5f5f6;

  /* Borders & dividers — subtle */
  --color-border:        #232329;
  --color-border-strong: #33333c;

  /* Brand + interaction — Primary Red (lighter for dark bg) */
  --color-primary:       #e0443d;
  --color-primary-hover: #ec5b54;
  --color-link:          #ef6a63;
  --color-hover:         #1b1b21;
  --color-focus-ring:    #e0443d;
  --color-scrim:         rgba(0, 0, 0, 0.65);

  /* Hero */
  --color-hero-kicker:        #fbd6d3;
  --color-hero-badge:         rgba(6, 6, 8, 0.5);
  --color-hero-badge-border:  rgba(255, 255, 255, 0.22);
  --color-hero-text:          #f6efee;
  --color-hero-fade:          #060608;
  --color-hero-dots-bg:       rgba(0, 0, 0, 0.55);
  --color-hero-dot:           rgba(255, 255, 255, 0.4);

  /* Floating shadows (dark theme — deep, premium) */
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.5), 0 40px 80px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 24px rgba(224, 68, 61, 0.22);
  --shadow-btn-secondary: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 18px rgba(0, 0, 0, 0.45);
}

/* Smooth cross-fade when the user toggles the theme
   (added briefly by app.js; reduced-motion is handled
    by the universal override in style.css) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease,
    fill 300ms ease,
    box-shadow 300ms ease;
}