/* COLORS — near-monochrome Apple-style palette: white, one warm-neutral gray field, near-black
   ink, one action blue. Studio photography supplies all the color; the UI stays out of the way. */
:root {
  /* Neutrals */
  --white: #ffffff;
  --black: #000000;
  --gray-050: #fbfbfd; /* barely-there page tint */
  --gray-100: #f5f5f7; /* THE section field color */
  --gray-200: #e8e8ed; /* hairline fills, track backgrounds */
  --gray-300: #d2d2d7; /* borders, dividers */
  --gray-400: #a1a1a6; /* disabled ink, ink on black */
  --gray-500: #86868b; /* secondary ink */
  --gray-600: #6e6e73; /* tertiary/legal ink */
  --gray-800: #424245; /* dark surface elevation */
  --gray-900: #1d1d1f; /* primary ink — never pure black for text */

  /* Action blue */
  --blue-400: #2997ff; /* links on dark */
  --blue-500: #0071e3; /* primary button */
  --blue-600: #0077ed; /* primary button hover (lighter, not darker) */
  --blue-700: #0068d1; /* pressed */
  --blue-link: #0066cc; /* inline text links on light */

  /* Semantic (system-color family) */
  --red-500: #ff3b30;
  --orange-500: #ff9500;
  --green-500: #34c759;
  --yellow-500: #ffcc00;

  /* ---- Semantic aliases: use these in components ---- */
  --text-title: var(--gray-900);
  --text-body: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-tertiary: var(--gray-600);
  --text-disabled: var(--gray-400);
  --text-link: var(--blue-link);
  --text-on-accent: var(--white);
  --text-on-dark: var(--gray-100);
  --text-on-dark-secondary: var(--gray-400);

  --surface-page: var(--white);
  --surface-field: var(--gray-100);   /* alternating marketing section */
  --surface-card: var(--white);
  --surface-card-quiet: var(--gray-100);
  --surface-dark: var(--black);       /* full-bleed dark product section */
  --surface-dark-card: #1d1d1f;
  --surface-input: var(--white);
  --surface-scrim: rgba(0, 0, 0, 0.48);
  --surface-nav: rgba(255, 255, 255, 0.72);
  --surface-nav-dark: rgba(0, 0, 0, 0.72);

  --border-hairline: var(--gray-300);
  --border-quiet: var(--gray-200);
  --border-input: var(--gray-300);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-press: var(--blue-700);
  --accent-on-dark: var(--blue-400);
  --focus-ring: rgba(0, 113, 227, 0.4);
  --danger: var(--red-500);
  --success: var(--green-500);
  --warning: var(--orange-500);
}

/* Dark section scope: put class="pdc-dark" on any <section> to flip the ink. */
.pdc-dark {
  --text-title: var(--gray-100);
  --text-body: var(--gray-100);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --text-link: var(--blue-400);
  --surface-page: var(--black);
  --surface-field: #101010;
  --surface-card: var(--surface-dark-card);
  --surface-card-quiet: #101010;
  --border-hairline: rgba(255, 255, 255, 0.16);
  --border-quiet: rgba(255, 255, 255, 0.1);
}