/* ============================================================
   Freedom Sports Academy — Design Token System
   theme.css — CSS Custom Properties for Light / Dark Themes
   ============================================================ */

/* ─── Light Theme (Default) ─── */
:root {
    /* Background & Surfaces */
    --color-background:              #fef5f5;
    --color-surface:                 #fef5f5;
    --color-surface-dim:             #d4dbd2;
    --color-surface-bright:          #f5f9f3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low:   #feeaea;
    --color-surface-container:       #fde8e8;
    --color-surface-container-high:  #e2e7e0;
    --color-surface-container-highest: #dce1da;
    --color-surface-variant:         #dce1da;

    /* Primary */
    --color-primary:                 #b91c1c;
    --color-on-primary:              #2d0000;
    --color-primary-container:       #ff2d2d;
    --color-on-primary-container:    #2d0000;
    --color-primary-fixed:           #ff2d2d;
    --color-primary-fixed-dim:       #e01a1a;
    --color-on-primary-fixed:        #2d0000;
    --color-on-primary-fixed-variant: #4d0000;
    --color-inverse-primary:         #ff2d2d;

    /* Secondary */
    --color-secondary:               #50606f;
    --color-on-secondary:            #ffffff;
    --color-secondary-container:     #d1e1f4;
    --color-on-secondary-container:  #556474;
    --color-secondary-fixed:         #d4e4f6;
    --color-secondary-fixed-dim:     #b8c8da;
    --color-on-secondary-fixed:      #0d1d2a;
    --color-on-secondary-fixed-variant: #394857;

    /* Tertiary */
    --color-tertiary:                #595f65;
    --color-on-tertiary:             #ffffff;
    --color-tertiary-container:      #cbd1d8;
    --color-on-tertiary-container:   #535a60;
    --color-tertiary-fixed:          #dde3ea;
    --color-tertiary-fixed-dim:      #c1c7ce;
    --color-on-tertiary-fixed:       #161c21;
    --color-on-tertiary-fixed-variant: #41484d;

    /* Error */
    --color-error:                   #ba1a1a;
    --color-on-error:                #ffffff;
    --color-error-container:         #ffdad6;
    --color-on-error-container:      #93000a;

    /* On Colors */
    --color-on-background:           #1a0606;
    --color-on-surface:              #1a0606;
    --color-on-surface-variant:      #3f1010;

    /* Outline */
    --color-outline:                 #8b1a1a;
    --color-outline-variant:         #d4aaaa;

    /* Inverse */
    --color-inverse-surface:         #2d3133;
    --color-inverse-on-surface:      #eff1f3;
    --color-surface-tint:            #b91c1c;

    /* Glass Effects (Light) */
    --glass-bg:                      rgba(255, 255, 255, 0.55);
    --glass-border:                  rgba(255, 255, 255, 0.5);
    --glass-border-top:              rgba(255, 255, 255, 0.8);
    --glass-shadow:                  0 8px 32px rgba(0, 0, 0, 0.08);
    --glass-card-bg:                 rgba(255, 255, 255, 0.60);
    --glass-card-border:             rgba(255, 255, 255, 0.4);
    --glass-dock-bg:                 rgba(247, 249, 251, 0.55);
    --glass-dock-border:             rgba(0, 0, 0, 0.08);
    --glass-header-bg:               rgba(247, 249, 251, 0.75);
    --glass-header-border:           rgba(0, 0, 0, 0.06);

    /* Glow (Light) */
    --glow-primary:                  rgba(255, 45, 45, 0.30);
    --glow-primary-strong:           rgba(255, 45, 45, 0.18);
    --glow-lime-soft:                rgba(255, 45, 45, 0.12);

    /* Living Background Orbs (Light) — sports greens */
    --orb1-color:                    rgba(200, 20, 20, 0.18);
    --orb2-color:                    rgba(150, 15, 15, 0.14);
    --orb3-color:                    rgba(255, 45, 45, 0.10);

    /* Mesh Gradient Accent Points */
    --mesh-lime:                     rgba(255, 45, 45, 0.10);
    --mesh-teal:                     rgba(0, 104, 117, 0.08);
    --mesh-cyan:                     rgba(0, 218, 243, 0.06);

    /* Loader BG */
    --loader-bg:                     radial-gradient(circle at 50% 50%, #feeaea 0%, #f5d4d4 100%);
}

/* ─── Dark Theme ─── */
html.dark {
    /* Background & Surfaces */
    --color-background:              #0d1516;
    --color-surface:                 #0d1516;
    --color-surface-dim:             #0d1516;
    --color-surface-bright:          #333a3c;
    --color-surface-container-lowest: #080f11;
    --color-surface-container-low:   #151d1e;
    --color-surface-container:       #192122;
    --color-surface-container-high:  #242b2d;
    --color-surface-container-highest: #2e3638;
    --color-surface-variant:         #2e3638;

    /* Primary */
    --color-primary:                 #ff2d2d;
    --color-on-primary:              #2d0000;
    --color-primary-container:       #ff2d2d;
    --color-on-primary-container:    #2d0000;
    --color-primary-fixed:           #ff2d2d;
    --color-primary-fixed-dim:       #e01a1a;
    --color-on-primary-fixed:        #2d0000;
    --color-on-primary-fixed-variant: #4d0000;
    --color-inverse-primary:         #ff2d2d;

    /* Secondary */
    --color-secondary:               #c6c6c7;
    --color-on-secondary:            #2f3131;
    --color-secondary-container:     #454747;
    --color-on-secondary-container:  #b4b5b5;
    --color-secondary-fixed:         #e2e2e2;
    --color-secondary-fixed-dim:     #c6c6c7;
    --color-on-secondary-fixed:      #1a1c1c;
    --color-on-secondary-fixed-variant: #454747;

    /* Tertiary */
    --color-tertiary:                #ffeac0;
    --color-on-tertiary:             #3e2e00;
    --color-tertiary-container:      #fec931;
    --color-on-tertiary-container:   #6f5500;
    --color-tertiary-fixed:          #ffdf96;
    --color-tertiary-fixed-dim:      #f3bf26;
    --color-on-tertiary-fixed:       #251a00;
    --color-on-tertiary-fixed-variant: #594400;

    /* Error */
    --color-error:                   #ffb4ab;
    --color-on-error:                #690005;
    --color-error-container:         #93000a;
    --color-on-error-container:      #ffdad6;

    /* On Colors */
    --color-on-background:           #dce4e5;
    --color-on-surface:              #dce4e5;
    --color-on-surface-variant:      #bac9cc;

    /* Outline */
    --color-outline:                 #849396;
    --color-outline-variant:         #3b494c;

    /* Inverse */
    --color-inverse-surface:         #dce4e5;
    --color-inverse-on-surface:      #2a3233;
    --color-surface-tint:            #ff2d2d;

    /* Glass Effects (Dark) */
    --glass-bg:                      rgba(13, 21, 22, 0.55);
    --glass-border:                  rgba(255, 255, 255, 0.08);
    --glass-border-top:              rgba(255, 255, 255, 0.16);
    --glass-shadow:                  0 8px 32px rgba(0, 0, 0, 0.45);
    --glass-card-bg:                 rgba(20, 28, 30, 0.50);
    --glass-card-border:             rgba(255, 255, 255, 0.07);
    --glass-dock-bg:                 rgba(10, 16, 18, 0.72);
    --glass-dock-border:             rgba(255, 255, 255, 0.08);
    --glass-header-bg:               rgba(10, 16, 18, 0.78);
    --glass-header-border:           rgba(255, 255, 255, 0.09);

    /* Glow (Dark) */
    --glow-primary:                  rgba(255, 45, 45, 0.22);
    --glow-primary-strong:           rgba(255, 45, 45, 0.38);
    --glow-lime-soft:                rgba(255, 45, 45, 0.10);

    /* Living Background Orbs (Dark) */
    --orb1-color:                    rgba(255, 45, 45, 0.06);
    --orb2-color:                    rgba(0, 104, 117, 0.06);
    --orb3-color:                    rgba(0, 218, 243, 0.04);

    /* Mesh Gradient Accent Points */
    --mesh-lime:                     rgba(255, 45, 45, 0.07);
    --mesh-teal:                     rgba(0, 104, 117, 0.07);
    --mesh-cyan:                     rgba(0, 218, 243, 0.05);

    /* Loader BG */
    --loader-bg:                     radial-gradient(circle at 50% 50%, #151d1e 0%, #0d1516 100%);
}