:root {
  /* Primary Interaction */
  --color-primary: #1C1C1E;
  --color-primary-hover: #2C2C2E;

  /* Secondary + Utility */
  --color-secondary: #3A3A3C;
  --color-secondary-hover: #4C4C4E;
  --color-tertiary: #6E6E73;
  --color-alert: #E11900;
  --color-muted: #8E8E93;
  --color-email: #007AFF;

  /* Text & Interface Greys */
  --color-placeholder: #6C6C70;

  /* Backgrounds */
  --bg-system: #F6F6F6;
  --bg-alternate: #F0F0F0;
  --bg-selected: #E5E5EA;
  --bg-card: #FAFAFA;

  /* Inputs */
  --input-bg: #FDFDFD;
  --input-border: #CFCFCF;

  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Typography Scale - Perfect Fourth (1.333) */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.333rem;
  --font-size-2xl: 1.777rem;
  --font-size-3xl: 2.369rem;
  --font-size-4xl: 3.157rem;
  --font-size-5xl: 4.209rem;
  --font-size-6xl: 5.61rem;
  
  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  
  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* Borders */
  --border-subtle: #E5E5E5;
  --border-color: #D2D2D7;

  /* Spacing Scale - Perfect Fourth (1.333) based on 1rem (16px) */
  --space-xs:  calc(1rem / (4 / 3));                                                                                            /* ~11px - base ÷ 1.333 */
  --space-sm: 1rem;                                                                                                             /* 16px - base */
  --space-base: calc(1rem * (4 / 3));                                                                                           /* ~21px - base × 1.333 */
  --space-lg: calc(1rem * (4 / 3) * (4 / 3));                                                                                   /* ~28px - base × 1.333² */
  --space-xl: calc(1rem * (4 / 3) * (4 / 3) * (4 / 3));                                                                         /* ~38px - base × 1.333³ */
  --space-2xl: calc(1rem * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3));                                                              /* ~51px - base × 1.333⁴ */
  --space-3xl: calc(1rem * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3));                                                    /* ~67px - base × 1.333⁵ */
  --space-4xl: calc(1rem * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3));                                          /* ~90px - base × 1.333⁶ */
  --space-5xl: calc(1rem * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3));                                /* ~120px - base × 1.333⁷ */
  --space-6xl: calc(1rem * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3));                      /* ~160px - base × 1.333⁸ */
  --space-7xl: calc(1rem * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3));            /* ~213px - base × 1.333⁹ */
  --space-8xl: calc(1rem * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3) * (4 / 3));  /* ~284px - base × 1.333¹⁰ */
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-system);
  font-family: var(--font-base);
  color: var(--color-primary);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  margin: 0;
}