/* Raw palette — verbatim from src/styles/tokens/colors/_palette.scss */
:root{
--gray-0:#ffffff;
--gray-100:#f9f7f5;
--gray-200:#f0ebe4;

--yellow-100:#f0ebe4;
--yellow-200:#fdf2f2;
--yellow-300:#edc28d;
--yellow-400:#bc8f44;

--brown-100:#ded0c3;
--brown-150:#c4b5a9;
--brown-200:#9e836f;
--brown-300:#856c5a;
--brown-400:#664f41;
--brown-500:#4d3526;
--brown-600:#382922;

--blue-50:#f2f9fd;
--blue-100:#c7ecfc;
--blue-125:#abddeb;
--blue-150:#9dc5d4;
--blue-200:#4d8fab;
--blue-300:#367d99;
--blue-400:#235e78;
--blue-450:#08445e;
--blue-500:#00344e;

--red-100:#fdf2f2;
--red-150:#fcd9de;
--red-175:#f5939e;
--red-200:#ba2b39;
--red-300:#8c0005;
--red-400:#660202;

--green-50:#f2f8f2;
--green-100:#c3f7c9;
--green-200:#177834;
--green-300:#064f1b;
--green-600:#177834;

--gold-100:#fde4b2;
--gold-150:#f5e6d0;
--gold-200:#ffc657;
--gold-300:#fca001;
--gold-400:#bc8f44;
--gold-500:#8f6831;

--purple-100:#fdf7ff;
--purple-300:#89468c;
--purple-400:#5a275c;
--purple-500:#292229;
--purple-800:#5a275c;

--white:var(--gray-0);

/* Warm grey aliases — match the Figma design-system naming; alias the gray/brown scales. */
--warm-grey-100:var(--gray-100);
--warm-grey-200:var(--gray-200);
--warm-grey-300:var(--brown-100);
--warm-grey-600:var(--brown-200);
--warm-grey-700:var(--brown-300);
--warm-grey-800:var(--brown-400);
--warm-grey-900:var(--brown-500);
--warm-grey-1000:var(--brown-600);

/* --bg-* rung: referenced by the source's semantic aliases but never declared there
   (dangling in the repo). Resolved here onto the warm-grey ladder so surfaces/borders
   render. Confirm these five with design before treating them as canon. */
--bg-10:var(--gray-100);
--bg-20:var(--gray-200);
--bg-30:var(--brown-100);
--bg-50:var(--brown-150);
--bg-60:var(--brown-200);
--bg-80:var(--brown-500);
}

/* Semantic aliases — verbatim from src/styles/tokens/colors/_aliases.scss */
:root{
--color-text-primary:var(--brown-400);
--color-text-secondary:var(--brown-300);
--color-text-muted:var(--bg-60);
--color-text-inverse:var(--white);
--color-text-success:var(--green-600);
--color-text-error:var(--red-200);
--color-text-warning:var(--yellow-400);
--color-text-info:var(--blue-300);

--color-surface:var(--white);
--color-surface-muted:var(--bg-10);
--color-surface-elevated:var(--bg-20);
--color-surface-dark:var(--bg-80);
--color-border:var(--bg-30);
--color-border-light:var(--bg-20);
--color-border-dark:var(--bg-50);

--color-border-base-lighter:var(--color-border-light);
--color-border-base-light:var(--color-border);
--color-border-base-main:var(--color-border-dark);
--color-border-base-dark:var(--brown-300);
--color-border-base-muted:var(--brown-200);

--color-brand-primary:var(--blue-400);
--color-brand-secondary:var(--blue-200);
--color-brand-light:var(--blue-200);
--color-brand-dark:var(--blue-400);
--color-brand-contrast:var(--white);

--button-bg-primary-default:var(--blue-500);
--button-text-primary-default:var(--blue-50);
--button-stroke-primary-default:var(--blue-500);
--button-bg-primary-hover:var(--white);
--button-stroke-primary-hover:var(--blue-500);
--button-text-primary-hover:var(--blue-500);
--button-bg-primary-disabled:var(--gray-200);
--button-text-primary-disabled:var(--brown-300);
--button-shadow-primary:3px 3px 0px 0px #00558040;

--button-bg-primary-loading:var(--white);
--button-stroke-primary-loading:var(--gold-100);
--button-text-primary-loading:var(--brown-600);
--button-primary-loading-gradient:linear-gradient(98deg,var(--gold-100),var(--gold-200) 50%,var(--gold-300) 100%);

--button-bg-primary-negative:var(--white);
--button-stroke-primary-negative:var(--red-300);
--button-text-primary-negative:var(--red-300);
--button-shadow-primary-negative:3px 3px 0px 0px rgba(186,43,57,0.25);

--button-bg-primary-positive:var(--green-300);
--button-text-primary-positive:var(--green-50);

--button-bg-secondary-default:var(--white);
--button-stroke-secondary-default:var(--blue-500);
--button-text-secondary-default:var(--blue-500);
--button-bg-secondary-hover:var(--white);
--button-stroke-secondary-hover:var(--blue-500);
--button-text-secondary-hover:var(--blue-500);
--button-bg-secondary-disabled:var(--brown-100);
--button-stroke-secondary-disabled:var(--brown-100);
--button-text-secondary-disabled:var(--brown-400);
--button-shadow-secondary:3px 3px 0px 0px rgba(0,52,78,0.15);

--button-bg-golden-default:transparent;
--button-stroke-golden-default:var(--gold-300);
--button-text-golden-default:var(--gold-300);
--button-bg-golden-hover:var(--white);
--button-stroke-golden-hover:var(--gold-300);
--button-text-golden-hover:var(--brown-600);
--button-bg-golden-loading:var(--white);
--button-text-golden-loading:var(--brown-600);
--button-bg-golden-success:var(--green-300);
--button-text-golden-success:var(--green-50);
--button-golden-loading-fill:linear-gradient(90deg,var(--gold-300) 0%,var(--white) 100%);
--button-bg-golden-disabled:var(--white);
--button-text-golden-disabled:var(--brown-600);
--button-stroke-golden-disabled:var(--gold-400);
--button-shadow-golden:3px 3px 0px 0px rgba(77,59,49,0.25);
--button-golden-confirmed-icon-bg:var(--green-100);

--button-bg-ghost-default:transparent;
--button-stroke-ghost-default:transparent;
--button-text-ghost-default:var(--blue-300);
--button-bg-ghost-hover:var(--blue-100);
--button-stroke-ghost-hover:transparent;
--button-text-ghost-hover:var(--blue-500);
--button-bg-ghost-disabled:transparent;
--button-stroke-ghost-disabled:transparent;
--button-text-ghost-disabled:var(--brown-300);
--button-shadow-ghost:none;

--button-text-link:var(--blue-200);
--button-text-link-hover:var(--blue-500);
--button-bg-text-link-hover:var(--blue-100);
--button-text-link-pressed:var(--blue-500);
--button-text-link-disabled:var(--brown-200);

--button-text-link-negative:var(--red-200);
--button-bg-text-link-negative-hover:var(--red-150);

--state-success-bg:var(--green-100);
--state-success-border:var(--green-200);
--state-success-fg:var(--green-300);
--state-success-icon:var(--green-200);

--state-error-bg:var(--red-100);
--state-error-border:var(--red-200);
--state-error-fg:var(--red-300);
--state-error-icon:var(--red-200);

--state-warning-bg:var(--yellow-100);
--state-warning-border:var(--yellow-300);
--state-warning-fg:var(--yellow-400);
--state-warning-icon:var(--yellow-300);

--state-info-bg:var(--blue-200);
--state-info-border:var(--blue-400);
--state-info-fg:var(--blue-400);
--state-info-icon:var(--blue-300);

--state-review-bg:var(--gray-100);
--state-review-border:var(--brown-200);
--state-review-fg:var(--brown-400);
--state-review-icon:var(--brown-300);

--progress-bg:var(--bg-20);
--progress-fill:var(--blue-400);
--progress-success:var(--green-200);
--progress-warning:var(--yellow-300);
--progress-error:var(--red-200);

--optioncard-bg-default:var(--white);
--optioncard-bg-hover:var(--white);
--optioncard-bg-selected:var(--yellow-300);
--optioncard-bg-disabled:var(--gray-100);
--optioncard-stroke-default:var(--yellow-400);
--optioncard-stroke-hover:var(--yellow-400);
--optioncard-stroke-selected:var(--yellow-400);
--optioncard-stroke-disabled:#c4b5a9;
--optioncard-text-title-default:var(--brown-600);
--optioncard-text-title-hover:var(--brown-600);
--optioncard-text-title-selected:var(--brown-600);
--optioncard-text-title-disabled:var(--brown-300);
--optioncard-text-body-default:var(--brown-400);
--optioncard-text-body-hover:var(--brown-400);
--optioncard-text-body-selected:var(--brown-400);
--optioncard-text-body-disabled:var(--brown-200);
--optioncard-text-feedback:var(--red-200);
--optioncard-icon-left-default:var(--gold-500);
--optioncard-icon-right-default:var(--blue-500);
--optioncard-icon-left-hover:var(--gold-500);
--optioncard-icon-right-hover:var(--blue-500);
--optioncard-icon-left-selected:var(--gold-500);
--optioncard-icon-right-selected:var(--blue-500);
--optioncard-icon-left-disabled:var(--brown-200);
--optioncard-icon-right-disabled:var(--brown-200);
--optioncard-shadow:3px 3px 0px 0px rgba(77,59,49,0.25);

--textinput-bg-default:var(--white);
--textinput-bg-hover:var(--white);
--textinput-bg-active:var(--white);
--textinput-bg-filled:var(--white);
--textinput-bg-disabled:var(--gray-100);
--textinput-bg-error:var(--red-100);
--textinput-bg-error-hover:var(--red-150);

--textinput-stroke-default:var(--yellow-400);
--textinput-stroke-hover:var(--brown-500);
--textinput-stroke-active:var(--blue-500);
--textinput-stroke-filled:var(--gold-400);
--textinput-stroke-disabled:var(--gray-200);
--textinput-stroke-error:var(--red-200);

--textinput-text-title-default:var(--brown-400);
--textinput-text-title-hover:var(--brown-300);
--textinput-text-title-active:var(--blue-400);
--textinput-text-title-filled:var(--brown-400);
--textinput-text-title-disabled:var(--brown-200);
--textinput-text-title-error:var(--red-300);

--textinput-text-placeholder-default:var(--brown-200);
--textinput-text-placeholder-hover:var(--brown-200);
--textinput-text-placeholder-active:var(--blue-500);
--textinput-text-placeholder-filled:var(--brown-500);
--textinput-text-placeholder-disabled:var(--brown-500);
--textinput-text-placeholder-error:var(--red-175);

--textinput-text-value:var(--brown-500);
--textinput-text-value-error:var(--red-300);
}

/* Chart / data-viz palette — the gold "sunshine" gradient stops used by PieIcon,
   the golden button loading fill and the avatar hover ring. */
:root{
--gradient-sunshine:linear-gradient(126deg,var(--gold-100) 0%,var(--gold-200) 35%,var(--gold-300) 100%);
--gradient-signup-gold:linear-gradient(172deg,var(--gold-100) 5%,var(--gold-200) 36%,var(--gold-300) 100%);
}