/* ═══════════════════════════════════════════════════════════════
   CalcHub — Material Design 3 (MD3) Design Tokens
   Seed Color: #6750A4 (Purple/Violet)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* === MD3 Color Tokens (Light Mode) === */
  --md-primary:                 #6750A4;
  --md-on-primary:              #FFFFFF;
  --md-primary-container:       #EADDFF;
  --md-on-primary-container:    #21005E;

  --md-secondary:               #625B71;
  --md-on-secondary:            #FFFFFF;
  --md-secondary-container:     #E8DEF8;
  --md-on-secondary-container:  #1D192B;

  --md-tertiary:                #7D5260;
  --md-on-tertiary:             #FFFFFF;
  --md-tertiary-container:      #FFD8E4;
  --md-on-tertiary-container:   #31111D;

  --md-error:                   #B3261E;
  --md-on-error:                #FFFFFF;
  --md-error-container:         #F9DEDC;
  --md-on-error-container:      #410E0B;

  --md-background:              #FFFBFE;
  --md-on-background:           #1C1B1F;

  --md-surface:                 #FFFBFE;
  --md-on-surface:              #1C1B1F;
  --md-surface-variant:         #49454F;
  --md-on-surface-variant:      #49454F;

  --md-surface-container:       #F3EDF7;
  --md-surface-container-high:  #ECE6F0;
  --md-surface-container-low:   #F7F2FA;

  --md-outline:                 #79747E;
  --md-outline-variant:         #C4C7C5;

  --md-shadow:                  #000000;
  --md-scrim:                   #000000;

  /* === MD3 Radius Tokens (Stitch-Inspired Generous & Organic) === */
  --md-radius-xs:     4px;
  --md-radius-sm:     12px;
  --md-radius-md:     16px;
  --md-radius-lg:     24px;
  --md-radius-xl:     28px;
  --md-radius-2xl:    32px;
  --md-radius-3xl:    48px;
  --md-radius-full:   9999px;

  /* === MD3 Elevation (Shadow) Tokens === */
  --md-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --md-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.10);
  --md-shadow-3: 0 4px 16px rgba(0, 0, 0, 0.12);
  --md-shadow-4: 0 8px 32px rgba(0, 0, 0, 0.14);
  --md-shadow-5: 0 12px 48px rgba(0, 0, 0, 0.16);

  /* === MD3 Motion Tokens === */
  --md-easing:          cubic-bezier(0.2, 0, 0, 1);
  --md-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --md-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --md-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);

  --md-duration:        300ms;
  --md-duration-short:  150ms;
  --md-duration-fast:   200ms;
  --md-duration-medium: 350ms;

  /* === Typography === */
  --md-font:            'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --md-font-mono:       'Roboto Mono', 'Courier New', monospace;

  /* Display Sizes */
  --md-size-display-lg: 3.5rem;
  --md-size-display-md: 2.8rem;
  --md-size-display-sm: 2.2rem;

  /* Headline Sizes */
  --md-size-headline-lg: 2rem;
  --md-size-headline-md: 1.75rem;
  --md-size-headline-sm: 1.5rem;

  /* Title Sizes */
  --md-size-title-lg: 1.375rem;
  --md-size-title-md: 1rem;
  --md-size-title-sm: 0.875rem;

  /* Body Sizes */
  --md-size-body-lg: 1rem;
  --md-size-body-md: 0.875rem;
  --md-size-body-sm: 0.75rem;

  /* Label Sizes */
  --md-size-label-lg: 0.75rem;
  --md-size-label-md: 0.6875rem;
  --md-size-label-sm: 0.625rem;

  /* Line Heights */
  --md-lh-display-lg: 3.5rem;
  --md-lh-headline-lg: 2.5rem;
  --md-lh-title-lg: 1.75rem;
  --md-lh-body-lg: 1.5rem;
  --md-lh-body-md: 1.25rem;

  /* Letter Spacing */
  --md-ls-tracking-tight: -0.02em;
  --md-ls-tracking-normal: 0em;
  --md-ls-tracking-wide: 0.02em;

  /* === Spacing Scale === */
  --md-spacing-0: 0;
  --md-spacing-1: 4px;
  --md-spacing-2: 8px;
  --md-spacing-3: 12px;
  --md-spacing-4: 16px;
  --md-spacing-5: 20px;
  --md-spacing-6: 24px;
  --md-spacing-7: 28px;
  --md-spacing-8: 32px;
  --md-spacing-10: 40px;
  --md-spacing-12: 48px;
  --md-spacing-16: 64px;
}

/* ═══════════════════════════════════════════════════════════════
   Dark Mode Tokens — Only activates when user manually toggles
   Never auto-activates from OS preference
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --md-primary:                 #D0BCFF;
  --md-on-primary:              #381E72;
  --md-primary-container:       #4F378B;
  --md-on-primary-container:    #EADDFF;

  --md-secondary:               #CBC2DB;
  --md-on-secondary:            #332D41;
  --md-secondary-container:     #4A4458;
  --md-on-secondary-container:  #E8DEF8;

  --md-tertiary:                #EFB8C8;
  --md-on-tertiary:             #492532;
  --md-tertiary-container:      #633B48;
  --md-on-tertiary-container:   #FFD8E4;

  --md-error:                   #F2B8B5;
  --md-on-error:                #601410;
  --md-error-container:         #8C1D18;
  --md-on-error-container:      #F9DEDC;

  --md-background:              #1C1B1F;
  --md-on-background:           #E6E1E5;

  --md-surface:                 #1C1B1F;
  --md-on-surface:              #E6E1E5;
  --md-surface-variant:         #49454F;
  --md-on-surface-variant:      #CAC4D0;

  --md-surface-container:       #211F26;
  --md-surface-container-high:  #2B2930;
  --md-surface-container-low:   #1C1B1F;

  --md-outline:                 #938F99;
  --md-outline-variant:         #49454F;
}