/**
 * Design tokens — derived from Figma export (autohtml vars.css)
 * Single source for brand colors, gradients, and dark UI semantics.
 * Primitives live on :root; no data-* attributes required.
 */

:root {
    /* —— Gradients (duplicate definitions merged) —— */
    --temporary-gradient: linear-gradient(
        270deg,
        rgba(64, 94, 158, 1) 0%,
        rgba(143, 35, 174, 1) 49%,
        rgba(104, 78, 178, 1) 100%
    );
    --primary-main-gradient: linear-gradient(
        90deg,
        rgba(10, 9, 46, 1) 0%,
        rgba(42, 29, 77, 1) 33.06%,
        rgba(31, 27, 72, 1) 66.98%,
        rgba(133, 34, 117, 1) 100%
    );
    --new-gradient: linear-gradient(
        90deg,
        rgba(232, 59, 255, 1) 0%,
        rgba(54, 147, 255, 1) 90.18%
    );
    --gradient-shadow-box-shadow:
        -6px 10px 30px 0 rgba(59, 150, 255, 0.55),
        10px -10px 30px 0 rgba(232, 59, 255, 0.3);

    /* —— Blue (brand) —— */
    --blue-50: #eef7ff;
    --blue-100: #d9edff;
    --blue-200: #bce1ff;
    --blue-300: #8ecfff;
    --blue-400: #59b2ff;
    --blue-500: #3b96ff;
    --blue-600: #1b71f5;
    --blue-700: #145be1;
    --blue-800: #1749b6;
    --blue-900: #19418f;
    --blue-950: #142957;

    /* —— Grey —— */
    --grey-50: #f4f4f4;
    --grey-100: #efefef;
    --grey-200: #dcdcdc;
    --grey-300: #bdbdbd;
    --grey-400: #989898;
    --grey-500: #7c7c7c;
    --grey-600: #656565;
    --grey-700: #525252;
    --grey-800: #464646;
    --grey-900: #3d3d3d;
    --grey-950: #292929;
    --grey-white: #ffffff;
    --grey-black: #000000;

    /* —— Semantic aliases (Figma mode-1) —— */
    --primary-50: var(--blue-50);
    --primary-100: var(--blue-100);
    --primary-200: var(--blue-200);
    --primary-300: var(--blue-300);
    --primary-400: var(--blue-400);
    --primary-500: var(--blue-500);
    --primary-600: var(--blue-600);
    --primary-700: var(--blue-700);
    --primary-800: var(--blue-800);
    --primary-900: var(--blue-900);
    --primary-950: var(--blue-950);

    --neutral-50: var(--grey-50);
    --neutral-100: var(--grey-100);
    --neutral-200: var(--grey-200);
    --neutral-300: var(--grey-300);
    --neutral-400: var(--grey-400);
    --neutral-500: var(--grey-500);
    --neutral-600: var(--grey-600);
    --neutral-700: var(--grey-700);
    --neutral-800: var(--grey-800);
    --neutral-900: var(--grey-900);
    --neutral-950: var(--grey-950);
    --neutral-white: var(--grey-white);
    --neutral-black: var(--grey-black);

    /* —— RGBA overlays —— */
    --opacity-white-10: rgba(255, 255, 255, 0.1);
    --opacity-white-20: rgba(255, 255, 255, 0.2);
    --opacity-white-30: rgba(255, 255, 255, 0.3);
    --opacity-white-40: rgba(255, 255, 255, 0.4);
    --opacity-white-50: rgba(255, 255, 255, 0.5);
    --opacity-white-60: rgba(255, 255, 255, 0.6);
    --opacity-white-70: rgba(255, 255, 255, 0.7);
    --opacity-white-80: rgba(255, 255, 255, 0.8);
    --opacity-white-90: rgba(255, 255, 255, 0.9);
    --opacity-black-10: rgba(0, 0, 0, 0.1);
    --opacity-black-20: rgba(0, 0, 0, 0.2);
    --opacity-black-30: rgba(0, 0, 0, 0.3);
    --opacity-black-40: rgba(0, 0, 0, 0.4);
    --opacity-black-50: rgba(0, 0, 0, 0.5);
    --opacity-black-60: rgba(0, 0, 0, 0.6);
    --opacity-black-70: rgba(0, 0, 0, 0.7);
    --opacity-black-80: rgba(0, 0, 0, 0.8);
    --opacity-black-90: rgba(0, 0, 0, 0.9);

    /* —— Vibrant accents (hero / gradients) —— */
    --vibrent-blue-500: #434fff;
    --vibrent-blue-700: #2622ff;
    --vibrent-purple-500: #5f5df7;
    --vibrent-purple-700: #4432d0;
    --vibrent-pink-500: #be4cff;
    --vibrent-pink-600: #ad29f4;

    /* —— App-specific bridge (kinfo2 dark UI) —— */
    --color-page-bg: #0b0b0b;
    --color-text-primary: var(--neutral-white);
    --color-text-secondary: var(--neutral-50);
    --color-text-muted: rgba(255, 255, 255, 0.65);
    --color-border-subtle: var(--opacity-white-10);
    --color-surface-raised: var(--neutral-900);

    --font-family-sans: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}