// ─── Design v2 — atmospheric dusks ──────────────────────────────────────
// Opt-in overlay activated via [data-design="v2"] on <html>. The user's
// theme preference (warm-craft, ocean-dusk, etc.) chooses *which* dusk;
// all six get a tinted-photo backdrop and a darker, glass-friendly token set.
//
// The yellow V (brand) stays #f0d000 across every dusk.

[data-design="v2"] {
  // Brand constants — survive every theme/dusk
  --brand-yellow: #f0d000;

  // Default dusk = warm-craft → "amber dusk"
  // Glass opacity bumped to ~0.82 so cards stay readable on top of the
  // harbor photo (0.55 was too transparent — text disappeared into the bg).
  --color-bg:          #1a0d05;
  --color-surface:     rgba(36, 18, 6, 0.85);
  --color-surface-2:   rgba(58, 28, 10, 0.85);
  --color-border:      rgba(230, 180, 130, 0.32);
  --color-text:        #faecd0;
  --color-text-muted:  #d0b08c;
  --color-primary:     #e89048;
  --color-primary-fg:  #1a0d05;
  --color-secondary:   rgba(58, 28, 10, 0.85);
  --color-secondary-fg:#faecd0;
  --color-destructive: #e08070;
  --color-destructive-fg: #ffffff;
  --color-focus-ring:  var(--brand-yellow);

  // Per-theme dusk overrides — only the bg-tint + accent change between dusks
  &[data-theme="ocean-dusk"] {
    --color-bg:          #06121f;
    --color-surface:     rgba(10, 26, 44, 0.85);
    --color-surface-2:   rgba(18, 40, 66, 0.85);
    --color-border:      rgba(180, 210, 235, 0.30);
    --color-text:        #f4eed8;
    --color-text-muted:  #c0d0e0;
    --color-primary:     #4e9fc8;
    --color-primary-fg:  #06121f;
  }
  &[data-theme="sage-cream"] {
    --color-bg:          #081208;
    --color-surface:     rgba(14, 32, 18, 0.85);
    --color-surface-2:   rgba(24, 50, 28, 0.85);
    --color-border:      rgba(180, 220, 180, 0.28);
    --color-text:        #ecf3e0;
    --color-text-muted:  #b8d0b0;
    --color-primary:     #88c068;
    --color-primary-fg:  #081208;
  }
  &[data-theme="playful-pop"] {
    --color-bg:          #1a060f;
    --color-surface:     rgba(40, 12, 30, 0.85);
    --color-surface-2:   rgba(60, 20, 48, 0.85);
    --color-border:      rgba(230, 180, 200, 0.30);
    --color-text:        #f8e8ec;
    --color-text-muted:  #d8b0c0;
    --color-primary:     #d878a0;
    --color-primary-fg:  #1a060f;
  }
  &[data-theme="dusty-mauve"] {
    --color-bg:          #100618;
    --color-surface:     rgba(30, 12, 42, 0.85);
    --color-surface-2:   rgba(46, 20, 64, 0.85);
    --color-border:      rgba(210, 190, 230, 0.28);
    --color-text:        #f0e8f8;
    --color-text-muted:  #c8b8d8;
    --color-primary:     #b890d8;
    --color-primary-fg:  #100618;
  }
  &[data-theme="honey-slate"] {
    --color-bg:          #18120a;
    --color-surface:     rgba(36, 28, 10, 0.85);
    --color-surface-2:   rgba(54, 42, 18, 0.85);
    --color-border:      rgba(232, 200, 130, 0.32);
    --color-text:        #faf0d8;
    --color-text-muted:  #d8c098;
    --color-primary:     #e8c050;
    --color-primary-fg:  #18120a;
  }

  // Harbor photo backdrop — fixed under everything, theme-tinted
  body {
    position: relative;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('/build/assets/harbor.jpg') center/cover no-repeat;
    filter: brightness(0.42) saturate(0.85);
    z-index: -3;
  }
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(0,0,0,0.45) 100%),
      var(--color-bg);
    opacity: 0.70;
    mix-blend-mode: multiply;
    z-index: -2;
    pointer-events: none;
  }

  // ─── Top nav — stronger glass so text is readable ─────────────────────
  .top-nav {
    background: color-mix(in srgb, var(--color-bg) 70%, transparent);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-bottom-color: var(--color-border);

    &__wordmark { color: var(--color-text); }
    &__tab {
      color: var(--color-text-muted);
      &:hover { background: var(--color-surface); color: var(--color-text); }
      &--active {
        background: var(--color-surface-2);
        color: var(--brand-yellow);
      }
    }
  }

  // ─── Bottom nav — same treatment for mobile/tablet ───────────────────
  .bottom-nav {
    background: color-mix(in srgb, var(--color-bg) 78%, transparent);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-top-color: var(--color-border);
  }

  // ─── Theme swatches — each previews ITS OWN dusk in v2 ─────────────────
  // Each swatch's --swatch-bg / --swatch-primary are set inline by SettingsView
  // from the v1 THEMES table. Override per-swatch via the aria-label so each
  // tile previews its dusk variant regardless of which theme is active.
  .theme-swatch {
    border-color: var(--color-border);
    &--active { border-color: var(--brand-yellow); }
    &__label { color: var(--color-text); }
  }

  .theme-swatch[aria-label*="Warm Craft" i] {
    background: #2a1808; --swatch-primary: #e89048;
  }
  .theme-swatch[aria-label*="Ocean Dusk" i] {
    background: #0c1c2e; --swatch-primary: #4e9fc8;
  }
  .theme-swatch[aria-label*="Sage" i] {
    background: #122418; --swatch-primary: #88c068;
  }
  .theme-swatch[aria-label*="Playful" i] {
    background: #2a0e1e; --swatch-primary: #d878a0;
  }
  .theme-swatch[aria-label*="Dusty" i] {
    background: #1e0c2a; --swatch-primary: #b890d8;
  }
  .theme-swatch[aria-label*="Honey" i] {
    background: #241c0e; --swatch-primary: #e8c050;
  }
  .theme-swatch__bar { background: var(--swatch-primary); }
  .theme-swatch__dot { background: var(--swatch-primary); opacity: 0.6; }

  // ─── Buttons — primary stays accent-coloured; secondary becomes glass ──
  // The .settings__install button is the main primary action; keep it
  // accent-coloured so it's clearly tappable. But its text-color was hard
  // to read on the bright orange — force light text on accent.
  .settings__install {
    color: var(--color-primary-fg);
  }

  // The design toggle cards in Settings should look like glass cards, not
  // the v1 cream rectangles. (Selectors mirror the toggle markup.)
  .design-toggle__opt {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);

    &:hover { border-color: var(--brand-yellow); }
    &--active {
      border-color: var(--brand-yellow);
      background: var(--color-surface-2);
    }
  }
  .design-toggle__sub { color: var(--color-text-muted); }

  // ─── Frame card (Home) — let the glass + harbor backdrop show through ──
  // The frame card uses --color-surface as its bg already, which is now
  // semi-translucent. Add a subtle inset highlight + outer glow for depth.
  .frame-card {
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) inset,
      0 24px 48px -16px rgba(0,0,0,0.55);
    border-color: var(--color-border);
  }

  // Settings list rows / dividers
  .settings__row,
  .settings__action-link {
    border-color: var(--color-border);
  }
  .settings__row-label { color: var(--color-text-muted); }
  .settings__row-value,
  .settings__action-link { color: var(--color-text); }
  .settings__logout { color: var(--color-destructive); }

  // Frosted-glass surfaces — anywhere v1 used --color-surface as a solid bg
  // becomes a backdrop-blurred semi-translucent panel.
  .frame-card,
  .library__tile,
  .settings__section-card,
  .home-view__empty-card,
  .design-toggle__opt,
  .theme-swatch {
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
  }
}
