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

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

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

  --s-accent:          #FF9500;
  --s-accent-hover:    #FFB040;
  --s-accent-subtle:   rgba(255, 149, 0, 0.08);

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

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

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

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

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

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

    --s-accent:          #FF9500;
    --s-accent-hover:    #FFB040;
    --s-accent-subtle:   rgba(255, 149, 0, 0.12);

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

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

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

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

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

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

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

  --s-accent:          #FF9500;
  --s-accent-hover:    #FFB040;
  --s-accent-subtle:   rgba(255, 149, 0, 0.12);

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

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

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

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

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

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

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

  --s-accent:          #FF9500;
  --s-accent-hover:    #FFB040;
  --s-accent-subtle:   rgba(255, 149, 0, 0.08);

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

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

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

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

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

/* --- Sport accent colors --- */
:root {
  --sport-squash:       #1a1a1a;
  --sport-tennis:       #c8d943;
  --sport-tabletennis:  #ff8800;
  --sport-pickleball:   #f5d442;
  --sport-badminton:    #e8d5b0;
  --sport-padel:        #b8cc3a;
}

/* --- 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 {
  --s-max-width:    1200px;
  --s-nav-height:   64px;
  --s-radius-sm:    8px;
  --s-radius-md:    12px;
  --s-radius-lg:    16px;
  --s-radius-xl:    24px;
  --s-transition:   250ms ease;
  --s-transition-fast: 150ms ease;
}