/* ==========================================================================
   Created by Juergen Geider
   Pronouncy — Design Tokens
   Theme system: prefers-color-scheme default, manual toggle via JS class
   ========================================================================== */

/* --- Light theme (default) --- */
:root {
  --p-bg:              #FFFFFF;
  --p-bg-elevated:     #F5F7FA;
  --p-bg-tertiary:     #EBEDF0;
  --p-bg-nav:          rgba(255, 255, 255, 0.92);

  --p-text:            #1D1D1F;
  --p-text-secondary:  #6E6E73;
  --p-text-muted:      #98989D;

  --p-accent:          #6366F1;
  --p-accent-hover:    #818CF8;
  --p-accent-subtle:   rgba(99, 102, 241, 0.08);

  --p-chrome:          #808080;
  --p-chrome-light:    #A0A0A0;

  --p-border:          #E5E5EA;
  --p-border-hover:    #D1D1D6;

  --p-card-bg:         #FFFFFF;
  --p-card-border:     #E5E5EA;

  --p-success:         #34C759;
  --p-warning:         #FF9500;

  --p-shadow-sm:       0 1px 3px rgba(0,0,0,0.06);
  --p-shadow-md:       0 4px 12px rgba(0,0,0,0.08);
  --p-shadow-lg:       0 8px 30px rgba(0,0,0,0.1);
}

/* --- Dark theme via system preference --- */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --p-bg:              #0F0F0F;
    --p-bg-elevated:     #1A1A1A;
    --p-bg-tertiary:     #252525;
    --p-bg-nav:          rgba(15, 15, 15, 0.92);

    --p-text:            #F5F5F7;
    --p-text-secondary:  #98989D;
    --p-text-muted:      #6E6E73;

    --p-accent:          #818CF8;
    --p-accent-hover:    #A5B4FC;
    --p-accent-subtle:   rgba(99, 102, 241, 0.12);

    --p-chrome:          #C0C0C0;
    --p-chrome-light:    #E0E0E0;

    --p-border:          #2C2C2E;
    --p-border-hover:    #3A3A3C;

    --p-card-bg:         #1A1A1A;
    --p-card-border:     #2C2C2E;

    --p-success:         #30D158;
    --p-warning:         #FF9F0A;

    --p-shadow-sm:       0 1px 3px rgba(0,0,0,0.4);
    --p-shadow-md:       0 4px 12px rgba(0,0,0,0.5);
    --p-shadow-lg:       0 8px 30px rgba(0,0,0,0.6);
  }
}

/* --- Dark theme via manual toggle --- */
:root.theme-dark {
  --p-bg:              #0F0F0F;
  --p-bg-elevated:     #1A1A1A;
  --p-bg-tertiary:     #252525;
  --p-bg-nav:          rgba(15, 15, 15, 0.92);

  --p-text:            #F5F5F7;
  --p-text-secondary:  #98989D;
  --p-text-muted:      #6E6E73;

  --p-accent:          #818CF8;
  --p-accent-hover:    #A5B4FC;
  --p-accent-subtle:   rgba(99, 102, 241, 0.12);

  --p-chrome:          #C0C0C0;
  --p-chrome-light:    #E0E0E0;

  --p-border:          #2C2C2E;
  --p-border-hover:    #3A3A3C;

  --p-card-bg:         #1A1A1A;
  --p-card-border:     #2C2C2E;

  --p-success:         #30D158;
  --p-warning:         #FF9F0A;

  --p-shadow-sm:       0 1px 3px rgba(0,0,0,0.4);
  --p-shadow-md:       0 4px 12px rgba(0,0,0,0.5);
  --p-shadow-lg:       0 8px 30px rgba(0,0,0,0.6);
}

/* --- Light theme via manual toggle --- */
:root.theme-light {
  --p-bg:              #FFFFFF;
  --p-bg-elevated:     #F5F7FA;
  --p-bg-tertiary:     #EBEDF0;
  --p-bg-nav:          rgba(255, 255, 255, 0.92);

  --p-text:            #1D1D1F;
  --p-text-secondary:  #6E6E73;
  --p-text-muted:      #98989D;

  --p-accent:          #6366F1;
  --p-accent-hover:    #818CF8;
  --p-accent-subtle:   rgba(99, 102, 241, 0.08);

  --p-chrome:          #808080;
  --p-chrome-light:    #A0A0A0;

  --p-border:          #E5E5EA;
  --p-border-hover:    #D1D1D6;

  --p-card-bg:         #FFFFFF;
  --p-card-border:     #E5E5EA;

  --p-success:         #34C759;
  --p-warning:         #FF9500;

  --p-shadow-sm:       0 1px 3px rgba(0,0,0,0.06);
  --p-shadow-md:       0 4px 12px rgba(0,0,0,0.08);
  --p-shadow-lg:       0 8px 30px rgba(0,0,0,0.1);
}

/* --- Typography --- */
:root {
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;
}

/* --- Shared layout tokens --- */
:root {
  --p-max-width:    1200px;
  --p-nav-height:   64px;
  --p-radius-sm:    8px;
  --p-radius-md:    12px;
  --p-radius-lg:    16px;
  --p-radius-xl:    24px;
  --p-transition:   250ms ease;
  --p-transition-fast: 150ms ease;
}