/*
 * Theme color tokens
 *
 * Source of truth:
 * - theme.json registers the WordPress editor palette.
 * - This file exposes reusable CSS custom properties for theme styles.
 *
 * Usage:
 * - Prefer the semantic --color-* tokens in component styles.
 * - Keep the existing raw design-token names for compatibility.
 */

:root {
    /* Base palette aliases */
    --color-charcoal: var(--charcoal-500);
    --color-vanilla: var(--vanilla-500);
    --color-mint: var(--mint-500);
    --color-black-currant: var(--black-currant-500);
    --color-bubblegum: var(--bubblegum-500);
    --color-papaya: var(--papaya-500);
    --color-cherry: var(--cherry-500);
    --color-lemon: var(--lemon-500);
    --color-lime: var(--lime-500);

    /* Extended ramps */
    --black-currant-50: #F3E5FF;
    --black-currant-100: #E8CCFF;
    --black-currant-150: #DDB2FF;
    --black-currant-200: #D299FF;
    --black-currant-250: #C77FFF;
    --black-currant-300: #BB66FF;
    --black-currant-350: #B04CFF;
    --black-currant-400: #A533FF;
    --black-currant-450: #9A19FF;
    --black-currant-500: var(--wp--preset--color--black-currant);
    --black-currant-550: #8000E5;
    --black-currant-600: #7200CC;
    --black-currant-650: #6400B2;
    --black-currant-700: #550099;
    --black-currant-750: #47007F;
    --black-currant-800: #390065;
    --black-currant-850: #2A004C;
    --black-currant-900: #1C0032;
    --black-currant-950: #0E0019;
    --mint-50: #E5FAF8;
    --mint-100: #CCF6F1;
    --mint-150: #B2F1EA;
    --mint-200: #99EDE3;
    --mint-250: #7FE9DC;
    --mint-300: #66E4D5;
    --mint-350: #4CE0CE;
    --mint-400: #33DBC7;
    --mint-450: #19D7C0;
    --mint-500: var(--wp--preset--color--mint);
    --mint-550: #00BDA7;
    --mint-600: #00A894;
    --mint-650: #009382;
    --mint-700: #007E6F;
    --mint-750: #00695D;
    --mint-800: #00544A;
    --mint-850: #003F37;
    --mint-900: #002A25;
    --mint-950: #001512;
    --bubblegum-50: #E6F7FF;
    --bubblegum-100: #CDF0FF;
    --bubblegum-150: #B4E8FF;
    --bubblegum-200: #9CE1FF;
    --bubblegum-250: #83D9FF;
    --bubblegum-300: #6AD2FF;
    --bubblegum-350: #52CAFF;
    --bubblegum-400: #39C3FF;
    --bubblegum-450: #20BBFF;
    --bubblegum-500: var(--wp--preset--color--bubblegum);
    --bubblegum-550: #07A2E5;
    --bubblegum-600: #0690CC;
    --bubblegum-650: #057DB2;
    --bubblegum-700: #046C99;
    --bubblegum-750: #045A7F;
    --bubblegum-800: #034765;
    --bubblegum-850: #02354C;
    --bubblegum-900: #012332;
    --bubblegum-950: #001119;
    --cherry-50: #FBE5EF;
    --cherry-100: #F7CCE0;
    --cherry-150: #F3B3D1;
    --cherry-200: #EF9AC2;
    --cherry-250: #EC81B3;
    --cherry-300: #E867A4;
    --cherry-350: #E44E95;
    --cherry-400: #E03586;
    --cherry-450: #DC1C77;
    --cherry-500: var(--wp--preset--color--cherry);
    --cherry-550: #C3025D;
    --cherry-600: #AD0253;
    --cherry-650: #970248;
    --cherry-700: #82013E;
    --cherry-750: #6C0134;
    --cherry-800: #560129;
    --cherry-850: #41001F;
    --cherry-900: #2B0014;
    --cherry-950: #15000A;
    --papaya-50: #FEECEB;
    --papaya-100: #FDDAD8;
    --papaya-150: #FCC7C5;
    --papaya-200: #FBB5B2;
    --papaya-250: #FAA39F;
    --papaya-300: #F9908C;
    --papaya-350: #F87E79;
    --papaya-400: #F76B66;
    --papaya-450: #F65953;
    --papaya-500: var(--wp--preset--color--papaya);
    --papaya-550: #DD3F39;
    --papaya-600: #C43833;
    --papaya-650: #AC312C;
    --papaya-700: #932A26;
    --papaya-750: #7B2320;
    --papaya-800: #621C19;
    --papaya-850: #491513;
    --papaya-900: #310E0C;
    --papaya-950: #180706;
    --lemon-50: #FEFDE9;
    --lemon-100: #FEFCD4;
    --lemon-150: #FDFBBE;
    --lemon-200: #FDFAA9;
    --lemon-250: #FDF994;
    --lemon-300: #FCF87E;
    --lemon-350: #FCF769;
    --lemon-400: #FBF653;
    --lemon-450: #FBF53E;
    --lemon-500: var(--wp--preset--color--lemon);
    --lemon-550: #E1DB24;
    --lemon-600: #C8C320;
    --lemon-650: #AFAA1C;
    --lemon-700: #969218;
    --lemon-750: #7D7A14;
    --lemon-800: #646110;
    --lemon-850: #4B490C;
    --lemon-900: #323008;
    --lemon-950: #191804;
    --lime-50: #F5FCE7;
    --lime-100: #EBFACF;
    --lime-150: #E1F8B7;
    --lime-200: #D8F5A0;
    --lime-250: #CEF388;
    --lime-300: #C4F170;
    --lime-350: #BBEE59;
    --lime-400: #B1EC41;
    --lime-450: #A7EA29;
    --lime-500: var(--wp--preset--color--lime);
    --lime-550: #8ED010;
    --lime-600: #7EB90E;
    --lime-650: #6EA20C;
    --lime-700: #5E8B0A;
    --lime-750: #4F7409;
    --lime-800: #3F5C07;
    --lime-850: #2F4505;
    --lime-900: #1F2E03;
    --lime-950: #0F1701;

    --charcoal-50: #E6E5E6;
    --charcoal-100: #CDCCCE;
    --charcoal-150: #B4B2B6;
    --charcoal-200: #9B999E;
    --charcoal-250: #837F86;
    --charcoal-300: #6A666D;
    --charcoal-350: #514C55;
    --charcoal-400: #38333D;
    --charcoal-450: #1F1925;
    --charcoal-500: var(--wp--preset--color--charcoal);
    --charcoal-550: #06000B;
    --charcoal-600: #05000A;
    --charcoal-650: #040009;
    --charcoal-700: #040007;
    --charcoal-750: #030006;
    --charcoal-800: #020005;
    --charcoal-850: #020003;
    --charcoal-900: #010002;
    --charcoal-950: #000001;
    --vanilla-50: #FEFFFE;
    --vanilla-100: var(--vanilla-50);
    --vanilla-150: #FDFFFE;
    --vanilla-200: var(--vanilla-150);
    --vanilla-250: #FCFFFE;
    --vanilla-300: var(--vanilla-250);
    --vanilla-350: #FBFFFE;
    --vanilla-400: var(--vanilla-350);
    --vanilla-500: var(--wp--preset--color--vanilla);
    --vanilla-450: var(--vanilla-500);
    --vanilla-550: #E1E5E4;
    --vanilla-600: #C8CCCB;
    --vanilla-650: #AFB2B1;
    --vanilla-700: #969998;
    --vanilla-750: #7D7F7F;
    --vanilla-800: #636565;
    --vanilla-850: #4A4C4C;
    --vanilla-900: #313232;
    --vanilla-950: #181919;

    /* Plugin token overrides: all Onepoint brand colour decisions live here */
    /* Core brand + semantic text/status */
    --op-color-dark: var(--color-charcoal);
    --op-color-light: var(--color-vanilla);
    --op-color-accent: var(--color-black-currant);
    --op-color-success: var(--color-lime);
    --op-color-error: var(--color-cherry);
    --op-color-error-border: color-mix(in srgb, var(--color-cherry) 80%, transparent);
    --op-color-required: var(--op-color-error);
    --op-color-text: var(--color-charcoal);
    --op-color-text-muted: var(--charcoal-150);
    --op-color-text-light: var(--charcoal-350);

    /* Form fields and input controls (contact form, selects, textareas) */
    --op-input-bg: var(--color-vanilla);
    --op-input-border: var(--charcoal-150);
    --op-input-focus: var(--op-color-accent);

    /* Buttons and CTA states */
    --op-btn-bg: var(--color-black-currant);
    --op-btn-color: var(--color-vanilla);
    --op-btn-hover-bg: var(--black-currant-850);
    --op-btn-text-on-dark: var(--color-vanilla);

    /* Cards/surfaces and form containers */
    --op-card-bg: var(--color-vanilla);
    --op-card-border: var(--charcoal-50);
    --op-form-bg: linear-gradient(135deg, var(--color-vanilla) 81%, color-mix(in srgb, var(--black-currant-50) 60%, transparent) 100%);
    --op-form-border: var(--op-card-border);

    /* Section chrome (hero greeting glow / section labels) */
    --op-section-backdrop: linear-gradient(90deg, var(--bubblegum-50) 15%, color-mix(in srgb, var(--black-currant-100) 90%, transparent) 50%, var(--bubblegum-50) 85%);
    --op-section-label-color: var(--charcoal-800);

    /* Async/loading feedback */
    --op-spinner-track: color-mix(in srgb, var(--black-currant-500) 25%, transparent);
    --op-spinner-color: var(--color-black-currant);

    /* Card colour ramp — Onepoint papaya scale (light → dark) */
    --op-card-ramp-1:          var(--papaya-50);
    --op-card-ramp-2:          var(--papaya-100);
    --op-card-ramp-3:          var(--papaya-200);
    --op-card-ramp-4:          var(--papaya-350);
    --op-card-ramp-5:          var(--papaya-450);
    --op-card-ramp-6:          var(--papaya-600);
    --op-card-ramp-7:          var(--papaya-700);
    --op-card-ramp-8:          var(--papaya-800);
    --op-card-ramp-9:          var(--papaya-850);
    --op-card-ramp-10:         var(--papaya-900);
    --op-card-ramp-text-dark:  var(--papaya-700);
    --op-card-ramp-text-light: var(--vanilla-50);
}