/* ==========================================================================
   Consumii — Design Tokens
   Theme system: prefers-color-scheme default, manual toggle via JS class
   ========================================================================== */

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

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

  --c-accent:          #10B981;
  --c-accent-hover:    #34D399;
  --c-accent-subtle:   rgba(16, 185, 129, 0.08);

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

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

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

  --c-shadow-sm:       0 1px 3px rgba(0,0,0,0.06);
  --c-shadow-md:       0 4px 12px rgba(0,0,0,0.08);
  --c-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) {
    --c-bg:              #0F0F0F;
    --c-bg-elevated:     #1A1A1A;
    --c-bg-tertiary:     #252525;
    --c-bg-nav:          rgba(15, 15, 15, 0.92);

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

    --c-accent:          #34D399;
    --c-accent-hover:    #6EE7B7;
    --c-accent-subtle:   rgba(52, 211, 153, 0.12);

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

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

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

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

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

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

  --c-accent:          #34D399;
  --c-accent-hover:    #6EE7B7;
  --c-accent-subtle:   rgba(52, 211, 153, 0.12);

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

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

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

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

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

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

  --c-accent:          #10B981;
  --c-accent-hover:    #34D399;
  --c-accent-subtle:   rgba(16, 185, 129, 0.08);

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

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

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

  --c-shadow-sm:       0 1px 3px rgba(0,0,0,0.06);
  --c-shadow-md:       0 4px 12px rgba(0,0,0,0.08);
  --c-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 {
  --c-max-width:    1200px;
  --c-nav-height:   64px;
  --c-radius-sm:    8px;
  --c-radius-md:    12px;
  --c-radius-lg:    16px;
  --c-radius-xl:    24px;
  --c-transition:   250ms ease;
  --c-transition-fast: 150ms ease;
}