/* ======================================================
   Southwest Symphony — CSS Custom Properties
   All brand colors, typography, spacing, and design tokens.
   Light and dark mode via data-theme attribute.
   ====================================================== */

/* ------------------------------------------------------
   Light Mode (default)
   ------------------------------------------------------ */
:root,
[data-theme="light"] {
    /* Brand Blues */
    --sws-blue:          #3C9FD7;
    --sws-blue-dark:     #2D6FAB;
    --sws-blue-light:    #6DBDE8;
    --sws-blue-pale:     #E8F4FB;

    /* Backgrounds */
    --sws-bg:            #FFFFFF;
    --sws-bg-alt:        #F5F5F5;
    --sws-bg-accent:     #E8F4FB;

    /* Text */
    --sws-text:          #434343;
    --sws-text-muted:    #6B6B6B;
    --sws-text-faint:    #9A9A9A;
    --sws-text-heading:  #252525;
    --sws-text-inverse:  #FFFFFF;

    /* Surfaces */
    --sws-white:         #FFFFFF;
    --sws-off-white:     #F8F9FA;
    --sws-dark:          #252525;

    /* Borders */
    --sws-border:        #E2E8ED;
    --sws-border-focus:  #3C9FD7;

    /* Navbar */
    --sws-navbar-bg:     #FFFFFF;
    --sws-navbar-text:   #434343;
    --sws-navbar-hover:  #3C9FD7;

    /* Cards */
    --sws-card-bg:       #FFFFFF;
    --sws-card-shadow:   rgba(0, 0, 0, 0.08);

    /* Footer */
    --sws-footer-bg:     #252525;
    --sws-footer-text:   #E8E4DE;
    --sws-footer-muted:  #8A8A8A;
    --sws-footer-border: #333333;
    --sws-footer-link:   #6DBDE8;

    /* Overlay */
    --sws-overlay:       rgba(0, 0, 0, 0.5);
    --sws-overlay-dark:  rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------
   Dark Mode
   ------------------------------------------------------ */
[data-theme="dark"] {
    /* Brand Blues (slightly adjusted for dark backgrounds) */
    --sws-blue:          #3C9FD7;
    --sws-blue-dark:     #3C9FD7;
    --sws-blue-light:    #6DBDE8;
    --sws-blue-pale:     rgba(60, 159, 215, 0.1);

    /* Backgrounds */
    --sws-bg:            #252525;
    --sws-bg-alt:        #2F2F2F;
    --sws-bg-accent:     #3A3A3A;

    /* Text */
    --sws-text:          #F3F3F3;
    --sws-text-muted:    #A0A0A0;
    --sws-text-faint:    #6B6B6B;
    --sws-text-heading:  #FFFFFF;
    --sws-text-inverse:  #252525;

    /* Surfaces */
    --sws-white:         #2F2F2F;
    --sws-off-white:     #3A3A3A;
    --sws-dark:          #F5F5F5;

    /* Borders */
    --sws-border:        #333333;
    --sws-border-focus:  #6DBDE8;

    /* Navbar */
    --sws-navbar-bg:     #252525;
    --sws-navbar-text:   #E8E4DE;
    --sws-navbar-hover:  #6DBDE8;

    /* Cards */
    --sws-card-bg:       #2F2F2F;
    --sws-card-shadow:   rgba(0, 0, 0, 0.3);

    /* Footer */
    --sws-footer-bg:     #1A1A1A;
    --sws-footer-text:   #E8E4DE;
    --sws-footer-muted:  #8A8A8A;
    --sws-footer-border: #333333;
    --sws-footer-link:   #6DBDE8;

    /* Overlay */
    --sws-overlay:       rgba(0, 0, 0, 0.6);
    --sws-overlay-dark:  rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------
   Typography
   ------------------------------------------------------ */
:root {
    /* Font Families */
    --sws-font-display:  'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --sws-font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* Font Sizes — Fluid Scale */
    --sws-text-xs:       0.75rem;    /* 12px */
    --sws-text-sm:       0.875rem;   /* 14px */
    --sws-text-base:     1rem;       /* 16px */
    --sws-text-lg:       1.125rem;   /* 18px */
    --sws-text-xl:       1.25rem;    /* 20px */
    --sws-text-2xl:      1.5rem;     /* 24px */
    --sws-text-3xl:      1.875rem;   /* 30px */
    --sws-text-4xl:      2.25rem;    /* 36px */
    --sws-text-5xl:      3rem;       /* 48px */
    --sws-text-6xl:      3.75rem;    /* 60px */

    /* Font Weights */
    --sws-weight-light:     300;
    --sws-weight-regular:   400;
    --sws-weight-medium:    500;
    --sws-weight-semibold:  600;
    --sws-weight-bold:      700;

    /* Line Heights */
    --sws-leading-tight:    1.2;
    --sws-leading-normal:   1.6;
    --sws-leading-relaxed:  1.8;
}

/* ------------------------------------------------------
   Spacing Scale
   ------------------------------------------------------ */
:root {
    --sws-space-xs:     0.25rem;   /* 4px */
    --sws-space-sm:     0.5rem;    /* 8px */
    --sws-space-md:     1rem;      /* 16px */
    --sws-space-lg:     1.5rem;    /* 24px */
    --sws-space-xl:     2rem;      /* 32px */
    --sws-space-2xl:    3rem;      /* 48px */
    --sws-space-3xl:    4rem;      /* 64px */
    --sws-space-4xl:    6rem;      /* 96px */
}

/* ------------------------------------------------------
   Border Radius
   ------------------------------------------------------ */
:root {
    --sws-radius-sm:    0.25rem;   /* 4px */
    --sws-radius-md:    0.5rem;    /* 8px */
    --sws-radius-lg:    1rem;      /* 16px */
    --sws-radius-xl:    1.5rem;    /* 24px */
    --sws-radius-full:  50%;
    --sws-radius-pill:  9999px;
}

/* ------------------------------------------------------
   Transitions
   ------------------------------------------------------ */
:root {
    --sws-transition-fast:    150ms ease;
    --sws-transition-base:    250ms ease;
    --sws-transition-slow:    400ms ease;
    --sws-transition-bounce:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------
   Box Shadows
   ------------------------------------------------------ */
:root {
    --sws-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
    --sws-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.1);
    --sws-shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.12);
    --sws-shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.16);
    --sws-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}