/*
 * BidSmart Design Tokens — single source of truth for the design system.
 *
 * Rules:
 *   1. This is the ONLY file where raw color values (hex/rgb) are allowed.
 *   2. All other CSS, templates, and JS must reference var(--token).
 *   3. Prefer role tokens (--color-primary, --color-text-muted) over
 *      scale tokens (--gray-600) so a palette change stays one-line.
 */

/* ==================================================================== */
/* Accent scale — Radix Themes "violet", generated around #4338ca.      */
/* 1-2 app/subtle bg · 3-5 component bg/hover/active · 6-8 borders      */
/* 9 solid (primary) · 10 solid hover · 11 text on light · 12 hi-contrast */
/* Dark mode: pending — accent/gray/background scales to be added as a  */
/* [data-theme="dark"] block when supplied.                             */
/* ==================================================================== */
:root, .light, .light-theme {
  --violet-1: #fdfdff;
  --violet-2: #f7f8ff;
  --violet-3: #eef1ff;
  --violet-4: #e2e8ff;
  --violet-5: #d5ddff;
  --violet-6: #c5ceff;
  --violet-7: #afbaff;
  --violet-8: #929efc;
  --violet-9: #4338ca;
  --violet-10: #3823b8;
  --violet-11: #504fd4;
  --violet-12: #262769;

  --violet-a1: #0000ff02;
  --violet-a2: #0020ff08;
  --violet-a3: #002dff11;
  --violet-a4: #0035ff1d;
  --violet-a5: #0031ff2a;
  --violet-a6: #0028ff3a;
  --violet-a7: #0024ff50;
  --violet-a8: #001df86d;
  --violet-a9: #0e00bbc7;
  --violet-a10: #1800addc;
  --violet-a11: #0200c1b0;
  --violet-a12: #00014fd9;

  --violet-contrast: #fff;
  --violet-surface: #f5f6ffcc;
  --violet-indicator: #4338ca;
  --violet-track: #4338ca;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --violet-1: oklch(99.4% 0.0029 277);
      --violet-2: oklch(98.1% 0.0106 277);
      --violet-3: oklch(96.1% 0.0201 277);
      --violet-4: oklch(93.5% 0.0406 277);
      --violet-5: oklch(90.4% 0.0605 277);
      --violet-6: oklch(86.5% 0.0802 277);
      --violet-7: oklch(80.8% 0.1018 277);
      --violet-8: oklch(72.9% 0.136 277);
      --violet-9: oklch(45.7% 0.2146 277);
      --violet-10: oklch(40.3% 0.2146 277);
      --violet-11: oklch(51% 0.1995 277);
      --violet-12: oklch(31.4% 0.1134 277);

      --violet-a1: color(display-p3 0.0196 0.0196 1 / 0.008);
      --violet-a2: color(display-p3 0.0196 0.1451 0.8784 / 0.032);
      --violet-a3: color(display-p3 0.0078 0.1294 0.9412 / 0.063);
      --violet-a4: color(display-p3 0.0039 0.1804 0.9294 / 0.11);
      --violet-a5: color(display-p3 0.0039 0.1725 0.9294 / 0.161);
      --violet-a6: color(display-p3 0.0039 0.1294 0.9294 / 0.22);
      --violet-a7: color(display-p3 0.0039 0.1176 0.9373 / 0.306);
      --violet-a8: color(display-p3 0.0039 0.0941 0.9098 / 0.42);
      --violet-a9: color(display-p3 0.0471 0 0.6941 / 0.781);
      --violet-a10: color(display-p3 0.0784 0 0.6431 / 0.859);
      --violet-a11: color(display-p3 0.0078 0 0.7098 / 0.691);
      --violet-a12: color(display-p3 0 0.0039 0.2902 / 0.851);

      --violet-contrast: #fff;
      --violet-surface: color(display-p3 0.9608 0.9647 1 / 0.8);
      --violet-indicator: oklch(45.7% 0.2146 277);
      --violet-track: oklch(45.7% 0.2146 277);
    }
  }
}

/* ==================================================================== */
/* Gray scale — Radix Themes gray, hue-matched to the violet accent    */
/* (277.7). Legacy --gray-100..900 slots below remap onto these steps. */
/* ==================================================================== */
:root, .light, .light-theme {
  --gray-1: #fcfcfd;
  --gray-2: #f9f9fb;
  --gray-3: #eff0f3;
  --gray-4: #e7e8ec;
  --gray-5: #e0e1e6;
  --gray-6: #d8d9e0;
  --gray-7: #cdced7;
  --gray-8: #b9bbc6;
  --gray-9: #8b8d98;
  --gray-10: #80828d;
  --gray-11: #62636c;
  --gray-12: #1e1f24;

  --gray-a1: #00005503;
  --gray-a2: #00005506;
  --gray-a3: #00104010;
  --gray-a4: #000b3618;
  --gray-a5: #0009321f;
  --gray-a6: #00073527;
  --gray-a7: #00063332;
  --gray-a8: #00083046;
  --gray-a9: #00051d74;
  --gray-a10: #00051b7f;
  --gray-a11: #0002119d;
  --gray-a12: #000107e1;

  --gray-contrast: #FFFFFF;
  --gray-surface: #ffffffcc;
  --gray-indicator: #8b8d98;
  --gray-track: #8b8d98;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --gray-1: oklch(99.1% 0.0015 277.7);
      --gray-2: oklch(98.2% 0.003 277.7);
      --gray-3: oklch(95.6% 0.0045 277.7);
      --gray-4: oklch(93.1% 0.0061 277.7);
      --gray-5: oklch(91% 0.0077 277.7);
      --gray-6: oklch(88.8% 0.0093 277.7);
      --gray-7: oklch(85.3% 0.0117 277.7);
      --gray-8: oklch(79.4% 0.016 277.7);
      --gray-9: oklch(64.6% 0.0165 277.7);
      --gray-10: oklch(61% 0.0161 277.7);
      --gray-11: oklch(50.3% 0.0139 277.7);
      --gray-12: oklch(24.1% 0.0099 277.7);

      --gray-a1: color(display-p3 0.0235 0.0235 0.349 / 0.012);
      --gray-a2: color(display-p3 0.0235 0.0235 0.349 / 0.024);
      --gray-a3: color(display-p3 0.0078 0.0667 0.2549 / 0.063);
      --gray-a4: color(display-p3 0.0118 0.051 0.2157 / 0.095);
      --gray-a5: color(display-p3 0.0039 0.0392 0.2 / 0.122);
      --gray-a6: color(display-p3 0.0039 0.0275 0.1804 / 0.153);
      --gray-a7: color(display-p3 0.0078 0.0275 0.1843 / 0.197);
      --gray-a8: color(display-p3 0.0039 0.0314 0.1765 / 0.275);
      --gray-a9: color(display-p3 0.0039 0.0196 0.1059 / 0.455);
      --gray-a10: color(display-p3 0.0039 0.0196 0.098 / 0.499);
      --gray-a11: color(display-p3 0 0.0078 0.0588 / 0.616);
      --gray-a12: color(display-p3 0 0.0039 0.0275 / 0.883);

      --gray-contrast: #FFFFFF;
      --gray-surface: color(display-p3 1 1 1 / 80%);
      --gray-indicator: oklch(64.6% 0.0165 277.7);
      --gray-track: oklch(64.6% 0.0165 277.7);
    }
  }
}

:root {
    /* ---------------------------------------------------------------- */
    /* Brand                                                            */
    /* ---------------------------------------------------------------- */
    --color-primary: var(--violet-9);           /* solid accent — actions, links, focus */
    --color-primary-hover: var(--violet-10);
    --color-primary-active: var(--violet-10);
    --color-primary-rgb: 67, 56, 202; /* for rgba() shadows/focus rings */
    --color-secondary: #6d28d9;        /* violet-700 — gradient partner */
    --color-secondary-rgb: 109, 40, 217;
    --color-secondary-hover: #5b21b6;
    --color-accent: #A78BFA;           /* lavender — sidebar brand text */
    --color-accent-light: #C4A8FF;

    /* Brand mark only — 3-step gradient ramp for the triangle logo icon
       (sidebar + auth hero). Not used elsewhere; keep scoped to the mark. */
    --color-brandmark-mid-1: #8B5CF6;
    --color-brandmark-mid-2: #6D28D9;

    /* Solid (not rgba) — used on sticky table columns, where transparency
       would let scrolling content show through */
    --color-primary-tint-1: var(--violet-3);    /* row hover, subtle fills */
    --color-primary-tint-2: var(--violet-4);    /* active/selected fills */
    --color-primary-text: var(--violet-11);     /* accent as text — Radix step 11 */

    --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-brand-hover: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-secondary-hover) 100%);
    --gradient-accent-text: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);

    /* ---------------------------------------------------------------- */
    /* Semantic status colors (solid / soft bg / dark text-on-soft)     */
    /* ---------------------------------------------------------------- */
    /* Same Tailwind family as the dataviz palette (emerald/amber/rose/
       cyan) so alerts, toasts and buttons match the rest of the system. */
    --color-success: #059669;
    --color-success-alt: #10b981;      /* gradient partner (toasts) */
    --color-success-rgb: 5, 150, 105;
    --color-success-bg: #d1fae5;
    --color-success-border: #a7f3d0;
    --color-success-text: #065f46;

    --color-warning: #f59e0b;
    --color-warning-alt: #d97706;      /* gradient partner (toasts) */
    --color-warning-rgb: 245, 158, 11;
    --color-warning-bg: #fef3c7;
    --color-warning-bg-subtle: #fffbeb;
    --color-warning-border: #fde68a;
    --color-warning-text: #92400e;

    --color-danger: #e11d48;
    --color-danger-rgb: 225, 29, 72;
    --color-danger-hover: #be123c;
    --color-danger-bg: #ffe4e6;
    --color-danger-text: #9f1239;

    --color-info: #0891b2;
    --color-info-alt: #06b6d4;         /* gradient partner (toasts) */
    --color-info-rgb: 8, 145, 178;
    --color-info-bg: #cffafe;
    --color-info-border: #a5f3fc;
    --color-info-text: #155e75;

    /* ---------------------------------------------------------------- */
    /* Neutral scale (Bootstrap gray ramp)                              */
    /* ---------------------------------------------------------------- */
    --color-white: #ffffff;
    /* Legacy Bootstrap-style slots, remapped onto the Radix scale.
       Steps follow Radix semantics: 2 subtle bg · 4 hover · 6-7 borders
       · 8 disabled/icons · 11 muted text · 12 ink. */
    --gray-100: var(--gray-2);
    --gray-200: var(--gray-4);
    --gray-300: var(--gray-6);
    --gray-400: var(--gray-7);
    --gray-500: var(--gray-8);
    --gray-600: var(--gray-11);
    --gray-700: var(--gray-12);
    --gray-800: var(--gray-12);
    --gray-900: var(--gray-12);

    /* Slate scale (sidebar/auth dark end + dashboard neutral-tint accents) */
    --slate-900: #0F172A;
    --slate-800: #1E293B;
    --slate-500: #64748B;
    --slate-500-rgb: 100, 116, 139;
    --slate-400: #94A3B8;
    --slate-400-rgb: 148, 163, 184;
    --slate-100: #F1F5F9;
    --gradient-sidebar: linear-gradient(160deg, var(--slate-900) 0%, var(--slate-800) 100%);

    /* ---------------------------------------------------------------- */
    /* Role tokens — use these in component CSS                         */
    /* ---------------------------------------------------------------- */
    --color-bg: var(--gray-100);            /* app background */
    --color-surface: var(--color-white);    /* cards, navbar, modals */
    --color-border: var(--gray-300);
    --color-border-light: var(--gray-200);
    --color-text: var(--gray-800);
    --color-text-strong: var(--gray-900);
    --color-text-body: var(--gray-700);
    --color-text-muted: var(--gray-600);

    /* ---------------------------------------------------------------- */
    /* Platform branding (not semantic — do not reuse for status)       */
    /* ---------------------------------------------------------------- */
    --color-flipkart: #ff6b35;
    --color-flipkart-alt: #f7931e;
    --color-flipkart-hover: #e55a2b;
    --color-flipkart-alt-hover: #e0841a;
    --gradient-flipkart: linear-gradient(135deg, var(--color-flipkart) 0%, var(--color-flipkart-alt) 100%);
    --gradient-flipkart-hover: linear-gradient(135deg, var(--color-flipkart-hover) 0%, var(--color-flipkart-alt-hover) 100%);
    --color-amazon: #ff9900;
    --color-amazon-alt: #ff6600;
    --gradient-amazon: linear-gradient(135deg, var(--color-amazon) 0%, var(--color-amazon-alt) 100%);
    --color-hiveminds: #C0392B;        /* HiveMinds red — sidebar brand subtitle */

    /* ---------------------------------------------------------------- */
    /* Dataviz palette (dashboard KPIs, trend indicators, gradients).   */
    /* NOTE: Chart.js canvas configs cannot resolve var() — the chart   */
    /* scripts keep these values as literals; keep them in sync here.   */
    /*                                                                  */
    /* These are FILL colors, tuned for large areas: chart segments,    */
    /* bars, progress fills, status dots. They are far too light to be  */
    /* text — --viz-positive is 1.9:1 on white. When a dataviz color    */
    /* has to become a number or a label, use the -text sibling below.  */
    /* ---------------------------------------------------------------- */
    --viz-positive: #10b981;
    --viz-positive-rgb: 16, 185, 129;
    --viz-positive-dark: #059669;
    --viz-positive-dark-rgb: 5, 150, 105;
    --viz-negative: #f43f5e;
    --viz-negative-rgb: 244, 63, 94;
    --viz-negative-dark: #e11d48;
    --viz-negative-dark-rgb: 225, 29, 72;
    --viz-caution: #f59e0b;
    --viz-caution-rgb: 245, 158, 11;
    --viz-caution-dark: #d97706;
    --viz-caution-dark-rgb: 217, 119, 6;
    --viz-yellow: #fbbf24;
    --viz-yellow-rgb: 251, 191, 36;
    --viz-yellow-dark: #f59e0b;
    --viz-yellow-dark-rgb: 245, 158, 11;
    --viz-pink: #8b5cf6;
    --viz-pink-rgb: 139, 92, 246;
    --viz-pink-dark: #7c3aed;
    --viz-pink-dark-rgb: 124, 58, 237;
    --viz-blue: #06b6d4;
    --viz-blue-rgb: 6, 182, 212;
    --viz-blue-alt: #0891b2;
    --viz-blue-alt-rgb: 8, 145, 178;
    --viz-green: #14b8a6;
    --viz-green-rgb: 20, 184, 166;
    --viz-green-alt: #0d9488;
    --viz-green-alt-rgb: 13, 148, 136;
    --viz-amber: #f59e0b;
    --viz-amber-rgb: 245, 158, 11;
    --viz-amber-light: #fbbf24;
    --viz-amber-light-rgb: 251, 191, 36;
    --viz-amber-alt: #d97706;
    --viz-amber-alt-rgb: 217, 119, 6;

    /* Text-safe siblings of the fills above. Same hue, darkened until
       they clear 4.5:1 on white. Use for figures, labels and any text
       that carries a dataviz meaning — never the raw fill. */
    --viz-positive-text: #047857;      /* 5.2:1 */
    --viz-negative-text: #be123c;      /* 5.9:1 */
    --viz-caution-text: #b45309;       /* 5.0:1 on white — also serves the amber family */
    --viz-caution-text-strong: #92400e; /* amber text on amber tints, where #b45309 dips under 4.5 */
    --viz-pink-text: #6d28d9;          /* 7.0:1 */
    --viz-blue-text: #0e7490;          /* 5.2:1 */
    --viz-neutral-text: #475569;       /* 6.8:1 — slate, for "none/inactive" */

    /* ---------------------------------------------------------------- */
    /* Typography                                                       */
    /* ---------------------------------------------------------------- */
    --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* ---------------------------------------------------------------- */
    /* Radii                                                            */
    /* ---------------------------------------------------------------- */
    --radius-sm: 0.375rem;   /* 6px  — buttons, inputs */
    --radius-md: 0.5rem;     /* 8px  — cards, alerts, toasts */
    --radius-lg: 0.75rem;    /* 12px — dropdown panels, modals */
    --radius-full: 50%;

    /* ---------------------------------------------------------------- */
    /* Shadows                                                          */
    /* ---------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.2);       /* modal/dropdown pop-in */
    --shadow-edge: 2px 0 4px rgba(0, 0, 0, 0.1);           /* sliding panel / fixed-column edge */
    --shadow-header: 0 2px 2px -1px rgba(0, 0, 0, 0.1);    /* sticky detail-page header */
    --overlay-backdrop: rgba(0, 0, 0, 0.5);                /* modal backdrop dim */
    --focus-ring: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

/* ==================================================================== */
/* Bootstrap 5.3 bridge — existing Bootstrap markup adopts the tokens   */
/* ==================================================================== */
:root {
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary: var(--gray-600);
    --bs-success: var(--color-success);
    --bs-success-rgb: var(--color-success-rgb);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: var(--color-danger-rgb);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: var(--color-warning-rgb);
    --bs-info: var(--color-info);
    --bs-info-rgb: var(--color-info-rgb);
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-body-font-family: var(--font-sans);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: var(--color-primary-rgb);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-hover-color-rgb: var(--color-primary-rgb);
}

/* Bootstrap 5.3 buttons resolve their own --bs-btn-* variables, so the
   component-level overrides below are required for .btn-primary etc. */

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-active);
    --bs-btn-active-border-color: var(--color-primary-active);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary-active);
    --bs-btn-active-border-color: var(--color-primary-active);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--color-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-color: var(--color-primary);
    --bs-pagination-hover-color: var(--color-primary-hover);
    --bs-pagination-focus-color: var(--color-primary-hover);
    --bs-pagination-focus-box-shadow: var(--focus-ring);
}

.progress-bar {
    background-color: var(--color-primary);
}

/* Bootstrap dropdowns: use the brand color for the active item (Bootstrap's
   --bs-dropdown-link-active-bg is compiled separately from --bs-primary). */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--color-primary);
}

/* ==================================================================== */
/* Dark mode — accent (Radix violet dark, generated around #4338ca),   */
/* gray (Radix gray dark) and background. Inert until                  */
/* <html data-theme="dark"> (or .dark/.dark-theme) is set.             */
/* Test in devtools: document.documentElement.dataset.theme = 'dark'   */
/* ==================================================================== */
[data-theme="dark"], .dark, .dark-theme {
  --violet-1: #0e101d;
  --violet-2: #141627;
  --violet-3: #1e214d;
  --violet-4: #26286b;
  --violet-5: #2f317c;
  --violet-6: #393c8b;
  --violet-7: #44499f;
  --violet-8: #5156bd;
  --violet-9: #4338ca;
  --violet-10: #3823b8;
  --violet-11: #a0adff;
  --violet-12: #dae0ff;

  --violet-a1: #0000fb0b;
  --violet-a2: #344bfb16;
  --violet-a3: #4652fe3f;
  --violet-a4: #494efd60;
  --violet-a5: #5559fd72;
  --violet-a6: #6066ff82;
  --violet-a7: #676ffe98;
  --violet-a8: #6a70ffb8;
  --violet-a9: #5143ffc6;
  --violet-a10: #492bfeb3;
  --violet-a11: #a0adff;
  --violet-a12: #dae0ff;

  --violet-contrast: #fff;
  --violet-surface: #171b3b80;
  --violet-indicator: #4338ca;
  --violet-track: #4338ca;

  /* Gray scale (Radix gray dark, hue 277.7) */
  --gray-1: #111113;
  --gray-2: #19191b;
  --gray-3: #222325;
  --gray-4: #292a2e;
  --gray-5: #303136;
  --gray-6: #393a40;
  --gray-7: #46484f;
  --gray-8: #5f606a;
  --gray-9: #6c6e79;
  --gray-10: #797b86;
  --gray-11: #b2b3bd;
  --gray-12: #eeeef0;

  --gray-a1: #00000000;
  --gray-a2: #f4f4f609;
  --gray-a3: #eaf7f814;
  --gray-a4: #dde6f91e;
  --gray-a5: #e2e8fe26;
  --gray-a6: #e2e7fe31;
  --gray-a7: #e1e9ff41;
  --gray-a8: #e2e5fd5f;
  --gray-a9: #e2e6fd6f;
  --gray-a10: #e5e9fd7d;
  --gray-a11: #f0f1ffb8;
  --gray-a12: #fdfdffef;

  --gray-contrast: #FFFFFF;
  --gray-surface: rgba(0, 0, 0, 0.05);
  --gray-indicator: #6c6e79;
  --gray-track: #6c6e79;

  /* Legacy slots — same step semantics as light mode */
  --gray-100: var(--gray-3);
  --gray-200: var(--gray-4);
  --gray-300: var(--gray-6);
  --gray-400: var(--gray-7);
  --gray-500: var(--gray-8);
  --gray-600: var(--gray-11);
  --gray-700: var(--gray-12);
  --gray-800: var(--gray-12);
  --gray-900: var(--gray-12);

  /* Background + role remaps */
  --color-bg: var(--gray-1);
  --color-surface: var(--gray-2);
  --color-border: var(--gray-300);
  --color-border-light: var(--gray-200);
  --color-text: var(--gray-800);
  --color-text-strong: var(--gray-900);
  --color-text-body: var(--gray-700);
  --color-text-muted: var(--gray-600);
  --color-primary-hover: var(--violet-10);
  --color-primary-active: var(--violet-10);
  --color-primary-tint-1: var(--violet-3);
  --color-primary-tint-2: var(--violet-4);
  --color-primary-text: var(--violet-11);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    [data-theme="dark"], .dark, .dark-theme {
      --violet-1: oklch(17.9% 0.0262 277);
      --violet-2: oklch(20.6% 0.034 277);
      --violet-3: oklch(27.2% 0.0793 277);
      --violet-4: oklch(31.8% 0.1141 277);
      --violet-5: oklch(35.9% 0.1241 277);
      --violet-6: oklch(40% 0.1282 277);
      --violet-7: oklch(44.9% 0.1382 277);
      --violet-8: oklch(50.6% 0.1584 277);
      --violet-9: oklch(45.7% 0.2146 277);
      --violet-10: oklch(40.3% 0.2146 277);
      --violet-11: oklch(77.6% 0.1476 277);
      --violet-12: oklch(91.3% 0.0483 277);

      --violet-a1: color(display-p3 0 0 0.9804 / 0.039);
      --violet-a2: color(display-p3 0.2157 0.3098 0.9961 / 0.081);
      --violet-a3: color(display-p3 0.302 0.3373 0.9961 / 0.234);
      --violet-a4: color(display-p3 0.298 0.3216 1 / 0.356);
      --violet-a5: color(display-p3 0.3412 0.3608 1 / 0.428);
      --violet-a6: color(display-p3 0.3961 0.4118 1 / 0.488);
      --violet-a7: color(display-p3 0.4235 0.451 1 / 0.573);
      --violet-a8: color(display-p3 0.4353 0.4588 1 / 0.695);
      --violet-a9: color(display-p3 0.3216 0.2745 1 / 0.742);
      --violet-a10: color(display-p3 0.2745 0.1765 1 / 0.67);
      --violet-a11: color(display-p3 0.651 0.6941 1 / 0.975);
      --violet-a12: color(display-p3 0.8706 0.8902 1 / 0.988);

      --violet-contrast: #fff;
      --violet-surface: color(display-p3 0.0863 0.102 0.2196 / 0.5);
      --violet-indicator: oklch(45.7% 0.2146 277);
      --violet-track: oklch(45.7% 0.2146 277);
    }
  }
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    [data-theme="dark"], .dark, .dark-theme {
      --gray-1: oklch(17.9% 0.0042 277.7);
      --gray-2: oklch(21.5% 0.004 277.7);
      --gray-3: oklch(25.5% 0.0055 277.7);
      --gray-4: oklch(28.4% 0.0075 277.7);
      --gray-5: oklch(31.4% 0.0089 277.7);
      --gray-6: oklch(35% 0.01 277.7);
      --gray-7: oklch(40.2% 0.0121 277.7);
      --gray-8: oklch(49.2% 0.0157 277.7);
      --gray-9: oklch(54% 0.0167 277.7);
      --gray-10: oklch(58.6% 0.0165 277.7);
      --gray-11: oklch(77% 0.0138 277.7);
      --gray-12: oklch(94.9% 0.0026 277.7);

      --gray-a1: color(display-p3 0 0 0 / 0);
      --gray-a2: color(display-p3 0.9922 0.9922 1 / 0.034);
      --gray-a3: color(display-p3 0.9333 0.9843 0.9922 / 0.077);
      --gray-a4: color(display-p3 0.8863 0.9216 0.9961 / 0.115);
      --gray-a5: color(display-p3 0.8863 0.9098 0.9961 / 0.149);
      --gray-a6: color(display-p3 0.9059 0.9294 1 / 0.187);
      --gray-a7: color(display-p3 0.898 0.9294 1 / 0.25);
      --gray-a8: color(display-p3 0.9059 0.9176 1 / 0.365);
      --gray-a9: color(display-p3 0.902 0.9176 1 / 0.428);
      --gray-a10: color(display-p3 0.9098 0.9255 1 / 0.484);
      --gray-a11: color(display-p3 0.9451 0.9529 1 / 0.717);
      --gray-a12: color(display-p3 0.9922 0.9922 1 / 0.937);

      --gray-contrast: #FFFFFF;
      --gray-surface: color(display-p3 0 0 0 / 5%);
      --gray-indicator: oklch(54% 0.0167 277.7);
      --gray-track: oklch(54% 0.0167 277.7);
    }
  }
}