/* ============================================================
   brando.id - Material Design 3 · Light theme · color tokens
   Seed color: #1A5FB4 (trust blue)
   Generated with Google's official @material/material-color-utilities
   (themeFromSourceColor, baseline light scheme). All values verified
   WCAG AA for text and interactive controls.
   ============================================================ */

:root {
  /* ---- Primary ---- */
  --md-primary:                  #175DB2;
  --md-on-primary:               #FFFFFF;
  --md-primary-container:        #D6E3FF;
  --md-on-primary-container:     #001B3E;
  --md-inverse-primary:          #AAC7FF;

  /* ---- Secondary ---- */
  --md-secondary:                #565F71;
  --md-on-secondary:             #FFFFFF;
  --md-secondary-container:      #DAE2F9;
  --md-on-secondary-container:   #131C2B;

  /* ---- Tertiary ---- */
  --md-tertiary:                 #6F5575;
  --md-on-tertiary:              #FFFFFF;
  --md-tertiary-container:       #F9D8FD;
  --md-on-tertiary-container:    #28132E;

  /* ---- Error ---- */
  --md-error:                    #BA1A1A;
  --md-on-error:                 #FFFFFF;
  --md-error-container:          #FFDAD6;
  --md-on-error-container:       #410002;

  /* ---- Surface (neutral tonal scale) ---- */
  --md-surface:                  #FAF9FD;
  --md-surface-dim:              #DAD9DD;
  --md-surface-bright:           #FAF9FD;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low:    #F4F3F7;
  --md-surface-container:        #EFEDF1;
  --md-surface-container-high:   #E9E7EC;
  --md-surface-container-highest:#E3E2E6;
  --md-on-surface:               #1A1B1E;
  --md-surface-variant:          #E0E2EC;
  --md-on-surface-variant:       #44474E;

  /* ---- Outline ---- */
  --md-outline:                  #74777F;
  --md-outline-variant:          #C4C6D0;

  /* ---- Inverse ---- */
  --md-inverse-surface:          #2F3033;
  --md-inverse-on-surface:       #F1F0F4;

  /* ---- Utility ---- */
  --md-surface-tint:             #175DB2;
  --md-scrim:                    #000000;
  --md-shadow:                   #000000;

  /* ---- Page-level semantic aliases (brando.id) ---- */
  --page-bg:                     var(--md-surface);                    /* #FAF9FD */
  --page-bg-subtle:              var(--md-surface-container-low);      /* #F4F3F7 */
  --card-bg:                     var(--md-surface-container-lowest);   /* #FFFFFF */
  --card-bg-hover:               var(--md-surface-container-low);      /* #F4F3F7 */
  --card-border:                 var(--md-outline-variant);            /* #C4C6D0 */
  --text-primary:                var(--md-on-surface);                 /* #1A1B1E */
  --text-secondary:              var(--md-on-surface-variant);         /* #44474E */
  --text-link:                   var(--md-primary);                    /* #175DB2 */
  --hairline:                    var(--md-outline-variant);            /* #C4C6D0 */

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --text-h1: 44px/1.08 600;
  --text-h2: 30px/1.2 600;
  --text-h3: 19px/1.35 600;
  --text-body: 16px/1.6 400;
  --text-body-sm: 14px/1.55 400;
  --text-caption: 13px/1.5 400;
  --text-label: 14px/1 500;
  --text-eyebrow: 12px/1.4 500;

  /* ---- Shape ---- */
  --radius-card: 12px;
  --radius-btn: 999px;   /* MD3 pill */
  --radius-chip: 8px;
  --radius-field: 4px;

  /* ---- Elevation (MD3 level 1 / level 2, tonal shadows) ---- */
  --elevation-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
  --elevation-2: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);

  /* ---- Spacing (8pt grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}