/* Canonical GS colors. Source: supplied Generational Story Design System, color library.
   Raw UI color values belong only in this file. See COLOR-SYSTEM.md. */
:root {
  /* User-approved lightest brand step, added 2026-09-16. */
  --brand-10: #eff3f3;
  --brand-25: #e0e7e8;
  --brand-50: #c1d0d1;
  --brand-100: #a3b9ba;
  --brand-200: #85a2a4;
  --brand-300: #688c8e;
  --brand-400: #4b7679;
  --brand-500: #2d6165;
  --brand-600: #034d51;
  --brand-700: #023f42;
  --brand-800: #013234;
  --brand-900: #012527;
  --brand-950: #00181a;

  --gray-25: #fdfdfc;
  --gray-50: #fbfbf9;
  --gray-100: #f4f4f0;
  --gray-200: #e8e8e3;
  --gray-300: #d8d8d0;
  --gray-400: #abab9c;
  --gray-500: #7c7c67;
  --gray-600: #5b5b4b;
  --gray-700: #474739;
  --gray-800: #2b2b22;
  --gray-900: #1d1d16;
  --gray-950: #0c0c09;

  --amber-25: #fff7ea;
  --amber-50: #feeed4;
  --amber-100: #fee5be;
  --amber-200: #fddda7;
  --amber-300: #fcd490;
  --amber-400: #fbcb77;
  --amber-500: #fac15b;
  --amber-600: #f9b836;
  --amber-700: #d5971a;
  --amber-800: #a47404;
  --amber-900: #7e5a07;
  --amber-950: #5b4001;

  /* Additional colors explicitly specified by the design system. */
  --white: #ffffff;
  --focus-ring: #4a92a3;
  --shadow-color: #101828;
  --shadow-inset-color: #0a0c12;

  /* Shared semantic roles. Keep the existing short aliases compatible. */
  --paper: var(--gray-50);
  --ink: var(--gray-800);
  --muted: var(--gray-600);
  --teal: var(--brand-600);
  --line: var(--gray-200);
  --soft: var(--brand-25);
  --surface-card: var(--white);
  --surface-subtle: var(--gray-100);
  --surface-brand: var(--brand-25);
  --surface-inverse: var(--brand-800);
  --surface-inverse-emphasis: var(--brand-700);
  --surface-brand-fade: var(--brand-10);
  --text-brand-support: var(--brand-500);
  --text-accent: var(--amber-900);
  --text-on-inverse: var(--gray-50);
  --text-on-inverse-secondary: var(--brand-50);
  --text-on-inverse-muted: var(--brand-100);
  --border-strong: var(--gray-300);
  --border-inverse: var(--brand-500);
  --line-on-inverse: var(--brand-300);
  --action-hover: var(--brand-700);
  --overlay-backdrop: color-mix(in srgb,var(--gray-900) 72%,transparent);

  /* Watercolor pigment is drawn from these same palette tokens. */
  --pigment-parchment: var(--amber-200);
  --pigment-teal: var(--brand-400);
  --pigment-amber: var(--amber-800);
  --pigment-soft-teal: var(--brand-300);
  --watercolor-wash: radial-gradient(ellipse at 28% 38%,var(--pigment-teal),transparent 65%),radial-gradient(ellipse at 72% 40%,var(--pigment-amber),transparent 65%),radial-gradient(ellipse at 50% 65%,var(--pigment-parchment),var(--pigment-soft-teal));
}