@layer variables {

/* Design Token System */

:root {
  /* Colors - Minimal, professional palette */
  --color-bg: #fafaf8;
  --color-surface: #f6f6f3;
  --color-surface-hover: #f3f3f0;
  --color-surface-active: #f8f8f6;
  --color-text-primary: #1c1b19;
  --color-text-primary-hover: #141414;
  --color-text-secondary: #4a4a4a;
  --color-text-tertiary: #707070;
  --color-text-body-strong: color-mix(in srgb, var(--color-text-primary) 70%, var(--color-text-secondary));
  --color-accent: #4a6fa5;
  --color-accent-hover: #2c4a78;
  /* DevTools may flag low contrast on elements using this wash.
     At 2.5% alpha over --color-bg, the rendered color is nearly
     identical to the page background — real contrast is fine. */
  --color-accent-wash: rgb(74 111 165 / 2.5%);
  --color-border: #e0e0e0;
  --color-border-hover: #767676;
  --color-border-emphasis: #4a4a4a;
  --color-focus-ring: #4a6fa5;

  /* Typography Scale (1.25 ratio for mobile) */
  --font-size-base: 1rem;        /* 16px */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;      /* 14px */
  --font-size-lg: 1.125rem;      /* 18px */
  --font-size-xl: 1.25rem;       /* 20px */
  --font-size-2xl: 1.563rem;     /* 25px */
  --font-size-3xl: 1.953rem;     /* 31px */
  --font-size-4xl: 2.441rem;     /* 39px */
  --font-size-5xl: 3.052rem;     /* 49px */

  /* Font Stacks */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-heading: 'Fraunces', 'Georgia', 'Times New Roman', serif;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing Scale (8px base unit) */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */
  --space-4xl: 8rem;    /* 128px */

  /* Layout */
  --max-width-content: 42rem;    /* ~672px, optimal reading width */
  --max-width-breakout: 56rem;   /* ~896px, for breakout elements */
  --max-width-wide: 64rem;       /* ~1024px, for grids */
  --section-spacing: var(--space-3xl);

  --portrait-stroke: #1a1a1a;
  --portrait-stroke-opacity: 1;
}

/* Dark mode — manual override */
html[data-theme="dark"] {
  --color-bg: #1e1d1a;
  --color-surface: #23221e;
  --color-surface-hover: #262520;
  --color-surface-active: #2b2a25;
  --color-text-primary: #ddd8d1;
  --color-text-primary-hover: #ebe7e0;
  --color-text-secondary: #b0a79c;
  --color-text-tertiary: #938a84;
  --color-accent: #7a9ec4;
  --color-accent-hover: #9ab8d8;
  --color-accent-wash: rgb(122 158 196 / 10%);
  --color-border: #302f2c;
  --color-border-hover: #4a4945;
  --color-border-emphasis: #555450;
  --color-focus-ring: #7a9ec4;
  --portrait-stroke: #c8c2b9;
  --portrait-stroke-opacity: 0.78;
}

/* Dark mode — system preference (fires only when no manual override) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #1e1d1a;
    --color-surface: #23221e;
    --color-surface-hover: #262520;
    --color-surface-active: #2b2a25;
    --color-text-primary: #ddd8d1;
    --color-text-primary-hover: #ebe7e0;
    --color-text-secondary: #b0a79c;
    --color-text-tertiary: #938a84;
    --color-accent: #7a9ec4;
    --color-accent-hover: #9ab8d8;
    --color-accent-wash: rgb(122 158 196 / 10%);
    --color-border: #302f2c;
    --color-border-hover: #4a4945;
    --color-border-emphasis: #555450;
    --color-focus-ring: #7a9ec4;
    --portrait-stroke: #c8c2b9;
    --portrait-stroke-opacity: 0.78;
  }
}

} /* end @layer variables */