/* ============================================
   CardVault Elite — themes.css
   Theme variable overrides for 3 themes
   ============================================ */

/* Theme 1: Blush & Sage (default — set in main.css :root) */
html[data-theme="blush"] {
  /* Already defaults from main.css */
  color-scheme: light;
}

/* Theme 2: Clean Slate (neutral / business) */
html[data-theme="slate"] {
  color-scheme: light;

  --bg-page:        #F6F5F3;
  --bg-card:        #FFFFFF;
  --bg-elevated:    #FFFFFF;
  --bg-subtle:      #EEEDEA;
  --bg-accent:      #DBE3EA;
  --bg-accent-strong: #487197;

  --text-primary:   #2E3135;
  --text-secondary: #5E636A;
  --text-muted:     #666B71;
  --text-on-accent: #FFFFFF;

  --border:         #E4E7EA;
  --border-strong:  #D2D7DC;
  --divider:        #ECEFF2;

  --accent:         #7C92A6;
  --progress-fill:  #56708A;   /* 4.4:1 on the track */
  --accent-hover:   #487197;
  --accent-soft:    #DBE3EA;
  --accent-text:    #416689;

  --btn-primary-bg:    #487197;
  --btn-primary-fg:    #FFFFFF;
  --btn-primary-hover: #2E3135;
  --on-error:          #FFFFFF;

  --chart-1: #487197;
  --chart-2: #5D7F66;
  --chart-3: #A0654F;
  --chart-4: #8A7440;
  --chart-5: #7A5F8E;
  --chart-6: #3F7F7E;
  --chart-7: #A06A3A;
  --chart-8: #666B71;

  /* Dashboard welcome panel + picture (components/hero-art.js) */
  --hero-bg: linear-gradient(118deg, var(--bg-subtle) 0%, var(--bg-card) 55%, var(--accent-soft) 100%);
  --hero-border: var(--border-strong);
  --hero-eyebrow-bg: var(--bg-card); --hero-eyebrow-text: var(--accent-text);
  --art-glow: var(--accent-soft); --art-shadow: #2E3135; --art-ink: #2E3135;
  --art-window: #F6F5F3; --art-shine: #FFFFFF;
  --art-card1: var(--chart-3); --art-card2: var(--chart-1); --art-card3: var(--chart-2);
  --art-pack: var(--chart-5); --art-pack2: var(--chart-6); --art-star: #D6B15E;
  --art-case: #FFFFFF; --art-case-edge: var(--border-strong); --art-label: var(--chart-4);
  --art-spark: var(--chart-1);

  --success:        #5B6C5E;
  --success-bg:     #E4ECE5;
  --warning:        #736851;
  --warning-bg:     #F2EDDF;
  --error:          #8C5449;
  --error-bg:       #F2DFD8;
  --info:           #416689;
  --info-bg:        #E0E8EF;

  --shadow-sm:      0 1px 2px rgba(46, 49, 53, 0.04);
  --shadow:         0 2px 8px rgba(46, 49, 53, 0.05);
  --shadow-md:      0 4px 16px rgba(46, 49, 53, 0.07);
  --shadow-lg:      0 8px 32px rgba(46, 49, 53, 0.09);
  --shadow-xl:      0 16px 48px rgba(46, 49, 53, 0.10);
}

/* Theme 3: Night Vault (dark mode) */
html[data-theme="night"] {
  color-scheme: dark;

  --bg-page:        #1A1B1D;
  --bg-card:        #2C2E32;
  --bg-elevated:    #34373C;
  --bg-subtle:      #222426;
  --bg-accent:      #394137;
  --bg-accent-strong: #8E9B84;

  --text-primary:   #FFFFFF;
  --text-secondary: #DBD8D3;
  --text-muted:     #B8B3AD;
  --text-on-accent: #1A1B1D;
  --text-on-light:  #1A1B1D;

  --border:         #3A3D42;
  --border-strong:  #4A4D52;
  --divider:        #2F3236;

  --accent:         #8E9B84;
  --progress-fill:  #8E9B84;   /* already 5.3:1 on the dark track */
  --accent-hover:   #A3AE99;
  --accent-soft:    #394137;
  --accent-text:    #DFE5D9;

  /* Light sage buttons take dark ink (white measured 2.3:1). */
  --btn-primary-bg:    #A3AE99;
  --btn-primary-fg:    #1A1B1D;
  --btn-primary-hover: #B8C1AF;
  --on-error:          #1A1B1D;

  --chart-1: #AFC2B0;
  --chart-2: #EFB8AE;
  --chart-3: #9DB4CC;
  --chart-4: #D9BD8A;
  --chart-5: #C9A3BC;
  --chart-6: #9CC7C0;
  --chart-7: #E0A878;
  --chart-8: #C8C2BC;

  /* Dashboard welcome panel + picture (components/hero-art.js). Card windows
     and labels are light "paper", so the lines on them use a dark ink. */
  --hero-bg: linear-gradient(118deg, var(--bg-accent) 0%, var(--bg-card) 55%, var(--info-bg) 100%);
  --hero-border: var(--border-strong);
  --hero-eyebrow-bg: var(--bg-subtle); --hero-eyebrow-text: var(--accent-text);
  --art-glow: var(--bg-accent); --art-shadow: #000000; --art-ink: #25272E;
  --art-window: #ECE8E2; --art-shine: #FFFFFF;
  --art-card1: var(--chart-3); --art-card2: var(--chart-2); --art-card3: var(--chart-1);
  --art-pack: var(--chart-5); --art-pack2: var(--chart-6); --art-star: #E8C77A;
  --art-case: var(--bg-elevated); --art-case-edge: var(--text-muted); --art-label: var(--chart-4);
  --art-spark: var(--chart-4);

  --success:        #91A886;
  --success-bg:     #2E3A2E;
  --warning:        #C5A37A;
  --warning-bg:     #3A3328;
  --error:          #CC9488;
  --error-bg:       #3A2A26;
  --info:           #94A4B5;
  --info-bg:        #2A323A;

  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:         0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.5);
}

/* Theme transition (when switching themes manually) */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease) !important;
}