:root{
  /* base palette */
  --charcoal: #2A2A2A;
  --sand: #E8E2D8;
  --mist: #F5F5F5;
  --ocean: #6A8CA8;
  --gold: #C9A46A;
  --white: #FFFFFF;

  /* derived neutrals (for hover/border/subtle states) */
  --charcoal-70: rgba(42,42,42,0.7);
  --charcoal-45: rgba(42,42,42,0.45);
  --charcoal-15: rgba(42,42,42,0.15);
  --charcoal-08: rgba(42,42,42,0.08);
  --sand-60: rgba(232,226,216,0.6);
  --ocean-dark: #55738D;
  --ocean-tint: rgba(106,140,168,0.12);
  --gold-dark: #AC8A56;
  --gold-tint: rgba(201,164,106,0.14);
  --indigo: #3C4A5A;
  --indigo-tint: rgba(60,74,90,0.12);
  --indigo-dark: #2C3744;

  /* atmospheric texture overlays — CSS-only, no image assets */
  --texture-mist: radial-gradient(ellipse at 15% 10%, rgba(255,255,255,0.5) 0%, transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(42,42,42,0.035) 0%, transparent 60%); /* @kind other */
  --texture-mist-dark: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.05) 0%, transparent 55%), radial-gradient(ellipse at 90% 90%, rgba(255,255,255,0.03) 0%, transparent 60%); /* @kind other */

  /* semantic aliases */
  --surface-page: var(--mist);
  --surface-card: var(--white);
  --surface-inverse: var(--charcoal);
  --surface-sand: var(--sand);
  --text-primary: var(--charcoal);
  --text-secondary: var(--charcoal-70);
  --text-muted: var(--charcoal-45);
  --text-inverse: var(--mist);
  --border-subtle: var(--charcoal-08);
  --border-default: var(--charcoal-15);
  --accent-ocean: var(--ocean);
  --accent-gold: var(--gold);
  --accent-indigo: var(--indigo);
  --link-color: var(--ocean);
  --link-hover: var(--ocean-dark);
}