/* =========================================================
   Color — five values. Black, white, three grays.
   There is no brand accent and no semantic hue: photography
   carries all the color on the page.
   ========================================================= */
:root {
  /* base palette */
  --black: #1a1a1a;
  --white: #ffffff;
  --gray-1: #6b6b6b;  /* secondary type — the lightest gray permitted for text */
  --gray-2: #e6e6e6;  /* hairlines, borders, image placeholder */
  --gray-3: #f5f5f5;  /* alternating sections, panels */

  /* states */
  --black-hover: #3a3a3a;
  --hover-opacity: 0.65; /* @kind other */
  --disabled-opacity: 0.35; /* @kind other */

  /* semantic aliases — prefer these in product code */
  --text-primary: var(--black);
  --text-secondary: var(--gray-1);
  --text-inverse: var(--white);

  --surface-page: var(--white);
  --surface-alt: var(--gray-3);
  --surface-panel: var(--gray-3);
  --surface-dark: var(--black);
  --surface-placeholder: var(--gray-2);

  --border-hairline: var(--gray-2);
  --border-strong: var(--black);

  /* on dark: hierarchy is white at four alphas, never a gray hex */
  --on-dark-body: rgba(255, 255, 255, 0.78);
  --on-dark-accent: rgba(255, 255, 255, 0.62);
  --on-dark-label: rgba(255, 255, 255, 0.55);
  --on-dark-rule: rgba(255, 255, 255, 0.15);
  --on-dark-ghost-border: rgba(255, 255, 255, 0.45);
  --on-dark-ghost-fill: rgba(255, 255, 255, 0.1);

  /* image treatment */
  --scrim-banner: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.10) 42%, rgba(0,0,0,0.42) 100%); /* @kind color */
  --scrim-flat: rgba(0, 0, 0, 0.18);
  --scrim-tile: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%); /* @kind color */
  --text-shadow-overlay: 0 2px 4px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.45);
  --text-shadow-eyebrow: 0 2px 8px rgba(0,0,0,0.55);
}