:root {
  /* === Colors === */
  --surface:           #F8F4EE;
  --surface-alt:       #EDE7DB;
  --surface-inset:     #D8D0C4;
  --surface-brand:     #FBF5E8;
  --surface-structure: #423E95;
  --surface-sub:       #131125;
  --ink:               #2B2725;
  --ink-muted:         #5C5855;
  --ink-faint:         #767676;
  --ink-on-structure:  #FFFFFF;
  --ink-on-brand:      #1A1714;
  --brand:             #C69852;
  --brand-dim:         #A87830;
  --brand-glow:        #E8C87A;
  --structure:         #423E95;
  --structure-dim:     #33307F;
  --structure-glow:    #6B67D0;
  --border:            #DDD6C9;
  --border-strong:     #C4BCB0;
  --focus-ring:        #423E95;
  --success:           #1A7838;
  --on-success:        #FFFFFF;
  --warning:           #A85200;
  --on-warning:        #FFFFFF;
  --error:             #C42626;
  --on-error:          #FFFFFF;
  --info:              #1450A0;
  --on-info:           #FFFFFF;
  --whatsapp:          #25D366;
  --on-whatsapp:       #0A3D22;
  --overlay:           rgba(0,0,0,0.50);

  /* === Spacing === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === Radius === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* === Shadows === */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-brand: 0 4px 16px rgba(198,152,82,0.28);
  --shadow-focus: 0 0 0 3px rgba(66,62,149,0.35);

  /* === Typography === */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* === Layout === */
  --container-max: 1280px;
  --nav-height:    68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:           #0F0E1C;
    --surface-alt:       #19172E;
    --surface-inset:     #232040;
    --surface-brand:     #1A1710;
    --surface-structure: #2E2A78;
    --ink:               #EAE6DE;
    --ink-muted:         #9C98A8;
    --ink-faint:         #8E8AA0;
    --brand:             #D4AA6A;
    --brand-dim:         #B8904A;
    --brand-glow:        #E8C98A;
    --structure:         #7B78E8;
    --structure-dim:     #5A57C8;
    --structure-glow:    #A8A6F0;
    --border:            #352F4A;
    --border-strong:     #4A4462;
    --focus-ring:        #7B78E8;
    --success:           #3FC878;
    --on-success:        #0A3D22;
    --warning:           #F0963A;
    --on-warning:        #2A1A00;
    --error:             #F05050;
    --on-error:          #3A0000;
    --info:              #5A9CF0;
    --on-info:           #001040;
  }
}
:root[data-theme="dark"] {
  --surface:           #0F0E1C;
  --surface-alt:       #19172E;
  --surface-inset:     #232040;
  --surface-brand:     #1A1710;
  --surface-structure: #2E2A78;
  --ink:               #EAE6DE;
  --ink-muted:         #9C98A8;
  --ink-faint:         #8E8AA0;
  --brand:             #D4AA6A;
  --brand-dim:         #B8904A;
  --brand-glow:        #E8C98A;
  --structure:         #7B78E8;
  --structure-dim:     #5A57C8;
  --structure-glow:    #A8A6F0;
  --border:            #352F4A;
  --border-strong:     #4A4462;
  --focus-ring:        #7B78E8;
  --success:           #3FC878;
  --on-success:        #0A3D22;
  --warning:           #F0963A;
  --on-warning:        #2A1A00;
  --error:             #F05050;
  --on-error:          #3A0000;
  --info:              #5A9CF0;
  --on-info:           #001040;
}