/* Premium base styles and spacing system */

:root {
  /* Refined spacing scale using golden ratio approximations */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs: 0.75rem;    /* 12px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2.5rem;     /* 40px */
  --space-xl: 4rem;       /* 64px */
  --space-2xl: 6.5rem;    /* 104px */
  --space-3xl: 10.5rem;   /* 168px */

  /* Character-based spacing for content */
  --inline-space: 1.5ch;
  --block-space: 1.25rem;

  /* Enhanced typography scale */
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px - slightly larger for better readability */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.625rem;    /* 26px */
  --text-2xl: 2.125rem;   /* 34px */
  --text-3xl: 2.875rem;   /* 46px */
  --text-4xl: 4rem;       /* 64px */
  --text-5xl: 5.5rem;     /* 88px */

  /* Premium font stacks */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "New York", "SF Pro Serif", Georgia, Cambria, "Times New Roman", serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* Layout dimensions */
  --max-width: 68rem;     /* ~1088px */
  --content-width: 46rem; /* ~736px - optimal reading width */
  --wide-width: 90rem;    /* ~1440px */

  /* Premium effects */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.03);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: -0.011em;
}

/* Premium responsive breakpoints */
@media (min-width: 48rem) {
  :root {
    --text-base: 1.125rem;  /* 18px on larger screens */
    --space-2xl: 8rem;
    --space-3xl: 12rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --text-4xl: 5rem;
    --text-5xl: 6.5rem;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  }
}