:root {

/* ========================
   PRIMITIVE COLOR TOKENS
======================== */

/* Neutrals */
--neutral-0: #ffffff;
--neutral-100: #efe4cb;
--neutral-200: #d3c2a0;
--neutral-300: #9c8a81;
--neutral-400: #77635f;
--neutral-500: #3a1f26;
--neutral-600: #0e0e18;
--neutral-700: #000000;

/* Teals */
--teal-100: #bfdfd4;
--teal-200: #98ccb5;
--teal-300: #0ab395;
--teal-400: #009f83;
--teal-500: #00816a;

/* Reds */
--red-100: #e89498;
--red-200: #ed414d;
--red-300: #d2071f;
--red-400: #a6180f;
--red-500: #570500;

/* Purples */
--purple-100: #e7c0df;
--purple-200: #bc59a7;
--purple-300: #843974;
--purple-400: #761449;
--purple-500: #3c0020;

/* Blues */
--blue-100: #8293d9;
--blue-200: #5567b3;
--blue-300: #37478a;
--blue-400: #112165;
--blue-500: #000b39;

/* ========================
   SEMANTIC COLOR TOKENS
======================== */

--color-background-primary: var(--red-300);
--color-background-secondary: var(--neutral-600);

--color-text-primary: var(--neutral-600);
--color-text-secondary: var(--neutral-400);

--color-accent-primary: var(--teal-300);

--color-danger: var(--red-300);
--color-silhouette-primary: var(--neutral-700);
--color-hero-secondary: var(--red-500);
--color-eye-stroke: var(--red-400);
--color-highlight: var(--purple-300);
--color-info: var(--blue-300);

/* ========================
   TYPOGRAPHY TOKENS
======================== */

--font-display: "Chelsea Market", sans-serif;
--font-body: "Josefin Sans", sans-serif;

--font-size-title: 96px;
--font-size-heading: 48px;
--font-size-body: 18px;
--font-size-caption: 12px;

--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;

/* ========================
   SPACING TOKENS
======================== */

--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 40px;
--space-2xl: 56px;
--space-3xl: 72px;

/* ========================
   OVERLAY TOKENS
======================== */

--overlay-ink-15: rgba(0, 0, 0, 0.15);
--overlay-ink-20: rgba(0, 0, 0, 0.2);
--overlay-ink-25: rgba(0, 0, 0, 0.25);
--overlay-ink-30: rgba(0, 0, 0, 0.3);
--overlay-ink-60: rgba(0, 0, 0, 0.6);
--overlay-ink-70: rgba(0, 0, 0, 0.7);

/* ========================
   UI TOKENS
======================== */

--radius-sm: 6px;
--radius-lg: 18px;
--font-size-button: 24px;
--font-size-highlight: 22px;
--size-icon-lg: 64px;
--size-toggle: 220px;
--size-ritual-meter: 260px;
--size-faith-meter: 240px;
--size-faith-meter-min-height: 240px;
--size-faith-meter-max-height: 420px;

/* ========================
   ASSET TOKENS
======================== */

--icon-faith: url("../assets/icons/faith-icon.svg");
--icon-gold: url("../assets/icons/gold-icon.svg");
--icon-hunger: url("../assets/icons/hunger-icon.svg");
--icon-health: url("../assets/icons/health-icon.svg");
--icon-church: url("../assets/icons/church-icon.svg");
}

[data-theme="dark"] {

--color-background-primary: var(--neutral-600);
--color-background-secondary: var(--neutral-500);

--color-text-primary: var(--neutral-0);
--color-text-secondary: var(--neutral-200);
--color-silhouette-primary: var(--neutral-700);

}