/* ================================================================
   Spoonity Macondo — color tokens
   Source: Spoonity/macondo src/tokens/colors.css (verbatim values).
   Light mode in :root, dark overrides in .dark.
   ================================================================ */

:root {
    /* Neutrals */
    --white: #ffffff;
    --neutral-100: #f8f6f4;
    --neutral-200: #f0f0f0;
    --neutral-300: #e7e7e7;
    --neutral-400: #dcdcdc;
    --neutral-500: #c6cad2;
    --neutral-600: #1f2a3a;
    --neutral-700: #9ca3af;
    --neutral-800: #4a5565;
    --neutral-900: #111827;
    --black: #000000;

    /* Turquoise */
    --turquoise-100: #e7f2f6;
    --turquoise-200: #a8cfde;
    --turquoise-300: #6badc7;
    --turquoise-400: #4c92ae;
    --turquoise-500: #437f93;

    /* Ash */
    --ash-100: #edeef1;
    --ash-200: #bfbfcc;
    --ash-300: #8f8f99;
    --ash-400: #747481;
    --ash-500: #62626a;

    /* Violet */
    --violet-100: #f0eaf3;
    --violet-200: #cfbad9;
    --violet-300: #a47ab5;
    --violet-400: #9566a9;
    --violet-500: #7e4c94;

    /* Pink */
    --pink-100: #faebf4;
    --pink-200: #f0bfdc;
    --pink-300: #e284bb;
    --pink-400: #d35fa3;
    --pink-500: #d03991;

    /* Orange */
    --orange-100: #fcf1e9;
    --orange-200: #f6d3b6;
    --orange-300: #edaa73;
    --orange-400: #e58638;
    --orange-500: #cc6716;

    /* Bronze */
    --bronze-100: #f3efeb;
    --bronze-200: #dfd2c8;
    --bronze-300: #9e7658;
    --bronze-400: #836249;
    --bronze-500: #654f3e;

    /* Yellow */
    --yellow-100: #faf4e5;
    --yellow-200: #ecd5a0;
    --yellow-300: #e0b95e;
    --yellow-400: #d6a229;
    --yellow-500: #af841d;

    /* Red */
    --red-100: #fbe8ec;
    --red-200: #f2aeba;
    --red-300: #e97287;
    --red-400: #e05c75;
    --red-500: #c3223f;

    /* Green */
    --green-100: #e6f3eb;
    --green-200: #acd6bd;
    --green-300: #60b181;
    --green-400: #4a9669;
    --green-500: #3f7d58;

    /* Blue */
    --blue-100: #e9effb;
    --blue-200: #becef3;
    --blue-300: #86a4e9;
    --blue-400: #537ddf;
    --blue-500: #2557cb;

    /* Brand (logo) — Spoonity wordmark */
    --brand-spoonity-orange: #ff7e3d;
    --brand-spoonity-purple: #640c6f;
    --brand-spoonity-purple-mid: #9f62a6;
    --brand-spoonity-purple-light: #cba2cf;
}

/* Primitive dark overrides */
.dark {
    --white: #ffffff;
    --neutral-100: #f1f5f9;
    --neutral-200: #94a3b8;
    --neutral-300: #64748b;
    --neutral-400: #2e3d52;
    --neutral-500: #243042;
    --neutral-600: #1f2a3a;
    --neutral-700: #1c2333;
    --neutral-800: #171b25;
    --neutral-900: #0e131d;
    --black: #000000;

    --turquoise-100: #7dc6e20f;
    --turquoise-200: #7dc6e21f;
    --turquoise-300: #b8e0ef;
    --turquoise-400: #7dc6e2;
    --turquoise-500: #6badc7;

    --ash-100: #d6d6e70f;
    --ash-200: #d6d6e71f;
    --ash-300: #d6d6e7;
    --ash-400: #c5c5d4;
    --ash-500: #a1a1b1;

    --violet-100: #cfbad90f;
    --violet-200: #cfbad91f;
    --violet-300: #cba4db;
    --violet-400: #ba86cf;
    --violet-500: #9364a6;

    --pink-100: #f0bfdc0f;
    --pink-200: #f0bfdc1f;
    --pink-300: #eba8cf;
    --pink-400: #e284bb;
    --pink-500: #ce5fa0;

    --orange-100: #f6d3b60f;
    --orange-200: #f6d3b61f;
    --orange-300: #ffcd9e;
    --orange-400: #ffac68;
    --orange-500: #f79545;

    --bronze-100: #c7aa950f;
    --bronze-200: #c7aa951f;
    --bronze-300: #d6c1b2;
    --bronze-400: #c7aa95;
    --bronze-500: #a68268;

    --yellow-100: #f4c9650f;
    --yellow-200: #f4c9651f;
    --yellow-300: #f8da96;
    --yellow-400: #f4c965;
    --yellow-500: #d4ac4e;

    --red-100: #f4799014;
    --red-200: #f479901f;
    --red-300: #fb9fb0;
    --red-400: #e8546f;
    --red-500: #d0435d;

    --green-100: #acd6bd0f;
    --green-200: #acd6bd1f;
    --green-300: #9ff5c1;
    --green-400: #4cd582;
    --green-500: #38c06d;

    --blue-100: #becef30f;
    --blue-200: #becef31f;
    --blue-300: #b2c8fb;
    --blue-400: #83a4ef;
    --blue-500: #678ee6;
}

/* ================================================================
   Semantic tokens
   ================================================================ */
:root {
    --background: var(--neutral-100);

    --surface-base: var(--white);
    --surface-primary: var(--white);
    --surface-secondary: var(--neutral-200);
    --surface-hover: var(--neutral-300);
    --surface-tertiary: var(--neutral-400);

    --surface-inverse-primary: var(--neutral-900);
    --surface-inverse-disabled: var(--neutral-700);
    --surface-inverse-hover: var(--black);

    --typography-primary: var(--neutral-900);
    --typography-secondary: var(--neutral-800);
    --typography-tertiary: var(--neutral-700);

    --typography-inverse-primary: var(--white);
    --typography-inverse-secondary: var(--neutral-200);
    --typography-inverse-tertiary: var(--neutral-300);

    --border-primary: var(--neutral-300);
    --border-secondary: var(--neutral-400);
    --border-focused: var(--orange-300);

    --critical-surface: var(--red-100);
    --critical-border: var(--red-200);
    --critical-text: var(--red-300);
    --critical-fill: var(--red-300);
    --critical-hover: var(--red-400);

    --warning-surface: var(--yellow-100);
    --warning-border: var(--yellow-200);
    --warning-text: var(--yellow-400);
    --warning-fill: var(--yellow-300);
    --warning-hover: var(--yellow-400);

    --info-surface: var(--blue-100);
    --info-border: var(--blue-200);
    --info-text: var(--blue-300);
    --info-fill: var(--blue-400);
    --info-hover: var(--blue-500);

    --success-surface: var(--green-100);
    --success-border: var(--green-200);
    --success-text: var(--green-400);
    --success-fill: var(--green-400);
    --success-hover: var(--green-500);

    --brand-turquoise-surface: var(--turquoise-100);
    --brand-turquoise-border: var(--turquoise-200);
    --brand-turquoise-text: var(--turquoise-300);
    --brand-turquoise-fill: var(--turquoise-400);
    --brand-turquoise-hover: var(--turquoise-500);

    --brand-ash-surface: var(--ash-100);
    --brand-ash-border: var(--ash-200);
    --brand-ash-text: var(--ash-300);
    --brand-ash-fill: var(--ash-400);
    --brand-ash-hover: var(--ash-500);

    --brand-orange-surface: var(--orange-100);
    --brand-orange-border: var(--orange-200);
    --brand-orange-text: var(--orange-500);

    --brand-violet-surface: var(--violet-100);
    --brand-violet-border: var(--violet-300);
    --brand-violet-text: var(--violet-300);

    --brand-pink-surface: var(--pink-100);
    --brand-pink-border: var(--pink-300);
    --brand-pink-text: var(--pink-300);

    --brand-blue-surface: var(--blue-100);
    --brand-blue-border: var(--blue-300);
    --brand-blue-text: var(--blue-300);

    --brand-yellow-surface: var(--yellow-100);
    --brand-yellow-border: var(--yellow-300);
    --brand-yellow-text: var(--yellow-300);

    --brand-red-surface: var(--red-100);
    --brand-red-border: var(--red-300);
    --brand-red-text: var(--red-300);

    --brand-bronze-surface: var(--bronze-100);
    --brand-bronze-border: var(--bronze-300);
    --brand-bronze-text: var(--bronze-300);

    --alpha-30: rgba(255, 255, 255, 0.7);
    --alpha-60: rgba(255, 255, 255, 0.4);

    --backdrop: color-mix(in srgb, var(--black) 62%, transparent);
}

.dark {
    --background: var(--black);

    --surface-base: var(--neutral-900);
    --surface-primary: var(--neutral-800);
    --surface-secondary: var(--neutral-700);
    --surface-hover: var(--neutral-500);
    --surface-tertiary: var(--neutral-600);

    --surface-inverse-primary: var(--white);
    --surface-inverse-disabled: var(--neutral-300);
    --surface-inverse-hover: var(--neutral-100);

    --typography-primary: var(--neutral-100);
    --typography-secondary: var(--neutral-200);
    --typography-tertiary: var(--neutral-300);

    --typography-inverse-primary: var(--black);
    --typography-inverse-secondary: var(--neutral-800);
    --typography-inverse-tertiary: var(--neutral-400);

    --border-primary: var(--neutral-400);
    --border-secondary: var(--neutral-500);
    --border-focused: var(--orange-400);

    --critical-text: var(--red-400);
    --critical-fill: var(--red-400);
    --critical-hover: var(--red-500);

    --warning-text: var(--yellow-300);
    --warning-fill: var(--yellow-400);
    --warning-hover: var(--yellow-500);

    --alpha-30: rgba(255, 255, 255, 0.08);
    --alpha-60: rgba(255, 255, 255, 0.04);
}