/* ================================================================
   Rajan Code Studio - Material 3 Design Tokens
   Purple Seed #6750A4 | Light + Dark + System
   ================================================================ */

:root {
  /* M3 Light Palette (Purple Seed #6750A4) */
  --md-primary: #6750A4;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #EADDFF;
  --md-on-primary-container: #21005D;

  --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-surface: #FFFBFE;
  --md-surface-container-low: #F7F2FA;
  --md-surface-container: #F3EDF7;
  --md-surface-container-high: #ECE6F0;
  --md-on-surface: #1C1B1F;
  --md-on-surface-variant: #49454F;
  --md-outline: #79747E;
  --md-outline-variant: #CAC4D0;

  --md-success: #1B6E42;
  --md-success-container: #C8E8D5;
  --md-on-success-container: #002111;

  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, sans-serif;

  /* Shared Typography Scale (9 semantic sizes - single source of truth) */
  --text-xs: 0.75rem;      /* 12px - tiny metadata, legal notes, badge small labels */
  --text-sm: 0.875rem;     /* 14px - secondary text, captions, chips, controls */
  --text-md: 1rem;         /* 16px - body, navigation, FAQ body */
  --text-lg: 1.125rem;     /* 18px - lead text, brand, mobile nav */
  --text-xl: 1.25rem;      /* 20px - card titles, product title rows */
  --text-2xl: 1.5rem;      /* 24px - section titles, legal subsections */
  --text-3xl: 2rem;        /* 32px - page headings on mobile/tablet */
  --text-4xl: 2.5rem;      /* 40px - desktop page titles */
  --text-display: 3rem;    /* 48px - desktop hero titles */

  /* Icon glyph sizes (Material Symbols - not part of the text scale) */
  --icon-xs: 18px;
  --icon-sm: 20px;
  --icon-lg: 32px;
  --icon-xl: 44px;

  --elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  --elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --radius-full: 9999px;

  --motion-standard: 300ms cubic-bezier(0.2, 0, 0, 1);
  --motion-bounce: 150ms cubic-bezier(0.2, 0, 0, 1);
}

/* M3 Dark Palette - explicit user preference */
[data-theme="dark"] {
  --md-primary: #D0BCFF;
  --md-on-primary: #381E72;
  --md-primary-container: #4F378B;
  --md-on-primary-container: #EADDFF;

  --md-secondary: #CCC2DC;
  --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-surface: #141218;
  --md-surface-container-low: #1D1B20;
  --md-surface-container: #211F26;
  --md-surface-container-high: #2B2930;
  --md-on-surface: #E6E0E9;
  --md-on-surface-variant: #CAC4D0;
  --md-outline: #938F99;
  --md-outline-variant: #49454F;

  --md-success: #67DC9A;
  --md-success-container: #00522B;
  --md-on-success-container: #85FAAF;

  --elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.45), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.45), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
}

/* M3 Dark Palette - system fallback (respects OS while no explicit choice) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #D0BCFF;
    --md-on-primary: #381E72;
    --md-primary-container: #4F378B;
    --md-on-primary-container: #EADDFF;

    --md-secondary: #CCC2DC;
    --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-surface: #141218;
    --md-surface-container-low: #1D1B20;
    --md-surface-container: #211F26;
    --md-surface-container-high: #2B2930;
    --md-on-surface: #E6E0E9;
    --md-on-surface-variant: #CAC4D0;
    --md-outline: #938F99;
    --md-outline-variant: #49454F;

    --md-success: #67DC9A;
    --md-success-container: #00522B;
    --md-on-success-container: #85FAAF;

    --elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.45), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.45), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  }
}