/**
 * Nooyf Design Tokens & shadcn/ui Theme Compatibility Layer
 * Source: https://coolors.co/33658a-86bbd8-2f4858-f6ae2d-f26419
 */

:root {
  /* Primitive Brand Colors */
  --nyf-color-steel-blue: #33658a;
  --nyf-color-steel-blue-rgb: 51, 101, 138;
  --nyf-color-steel-blue-hover: #295270;
  --nyf-color-steel-blue-light: #427ba6;

  --nyf-color-sky-blue: #86bbd8;
  --nyf-color-sky-blue-rgb: 134, 187, 216;
  --nyf-color-sky-blue-tint: rgba(134, 187, 216, 0.15);

  --nyf-color-deep-slate: #2f4858;
  --nyf-color-deep-slate-rgb: 47, 72, 88;
  --nyf-color-deep-slate-dark: #21333e;
  --nyf-color-deep-slate-light: #3d5c70;

  --nyf-color-amber: #f6ae2d;
  --nyf-color-amber-rgb: 246, 174, 45;
  --nyf-color-amber-hover: #e29d20;

  --nyf-color-tangerine: #f26419;
  --nyf-color-tangerine-rgb: 242, 100, 25;
  --nyf-color-tangerine-hover: #d65412;

  --nyf-color-emerald: #10b981;
  --nyf-color-emerald-rgb: 16, 185, 129;
  --nyf-color-emerald-hover: #059669;

  /* Crimson: danger only. Destructive and failed, never urgent (that is Tangerine). */
  --nyf-color-crimson: #c81e3a;
  --nyf-color-crimson-rgb: 200, 30, 58;
  --nyf-color-crimson-hover: #a3162e;

  /* Sovereign Gold Accents (from official logo) */
  --nyf-color-gold-400: #e5ca9e;
  --nyf-color-gold-500: #c5a880;
  --nyf-color-gold-700: #977748;

  /* Cross-Platform Typography Tokens */
  --nyf-font-latin: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nyf-font-arabic: "IBM Plex Sans Arabic", "Tajawal", "Noto Sans Arabic", "SF Arabic", "Segoe UI Arabic", "Geeza Pro", Tahoma, sans-serif;
  --nyf-font-arabic-tajawal: "Tajawal", "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
  --nyf-font-arabic-cairo: "Cairo", "IBM Plex Sans Arabic", sans-serif;
  --nyf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* Semantic Aliases - Light Mode */
  --nyf-primary: var(--nyf-color-steel-blue);
  --nyf-primary-hover: var(--nyf-color-steel-blue-hover);
  --nyf-primary-light: var(--nyf-color-steel-blue-light);
  --nyf-primary-foreground: #ffffff;

  --nyf-secondary: var(--nyf-color-sky-blue);
  --nyf-secondary-foreground: var(--nyf-color-deep-slate);

  --nyf-neutral: var(--nyf-color-deep-slate);
  --nyf-neutral-foreground: #ffffff;

  --nyf-warning: var(--nyf-color-amber);
  --nyf-warning-hover: var(--nyf-color-amber-hover);
  --nyf-warning-foreground: var(--nyf-color-deep-slate-dark);

  --nyf-cta: var(--nyf-color-tangerine);
  --nyf-cta-hover: var(--nyf-color-tangerine-hover);
  --nyf-cta-foreground: #060a17;

  --nyf-success: var(--nyf-color-emerald);
  --nyf-success-hover: var(--nyf-color-emerald-hover);
  --nyf-success-foreground: #060a17;

  --nyf-focus-ring: var(--nyf-color-sky-blue);

  /* Danger: destructive actions, failures, exceeded budgets */
  --nyf-danger: var(--nyf-color-crimson);
  --nyf-danger-hover: var(--nyf-color-crimson-hover);
  --nyf-danger-foreground: #ffffff;
  --nyf-danger-tint: #fdecef;
  --nyf-danger-border: #f5b8c2;

  /* Colored text: use these, not the fills, for text on surfaces */
  --nyf-success-text: #047857;
  --nyf-warning-text: #92400e;
  --nyf-cta-text: #b23f06;
  --nyf-danger-text: #a3162e;

  /* Tags: opaque fills, key and value text each reach 4.5:1 */
  --nyf-tag-neutral-bg: #f1f5f9;
  --nyf-tag-neutral-border: #cbd5e1;
  --nyf-tag-neutral-key: #475569;
  --nyf-tag-neutral-value: #1e293b;
  --nyf-tag-info-bg: #e4f0f7;
  --nyf-tag-info-border: #b3d3e5;
  --nyf-tag-info-key: #2b5675;
  --nyf-tag-info-value: #1d3d55;
  --nyf-tag-success-bg: #dcf7ec;
  --nyf-tag-success-border: #9fe3c7;
  --nyf-tag-success-key: #046c4e;
  --nyf-tag-success-value: #064e3b;
  --nyf-tag-warning-bg: #fdf1d6;
  --nyf-tag-warning-border: #f5d48a;
  --nyf-tag-warning-key: #8a4b08;
  --nyf-tag-warning-value: #6b3a05;
  --nyf-tag-danger-bg: #fdecef;
  --nyf-tag-danger-border: #f5b8c2;
  --nyf-tag-danger-key: #a3162e;
  --nyf-tag-danger-value: #7f1024;

  /* Badges: follow the tag of the same variant */
  --nyf-badge-neutral-bg: var(--nyf-tag-neutral-bg);
  --nyf-badge-neutral-border: var(--nyf-tag-neutral-border);
  --nyf-badge-neutral-text: var(--nyf-tag-neutral-value);
  --nyf-badge-info-bg: var(--nyf-tag-info-bg);
  --nyf-badge-info-border: var(--nyf-tag-info-border);
  --nyf-badge-info-text: var(--nyf-tag-info-value);
  --nyf-badge-success-bg: var(--nyf-tag-success-bg);
  --nyf-badge-success-border: var(--nyf-tag-success-border);
  --nyf-badge-success-text: var(--nyf-tag-success-value);
  --nyf-badge-warning-bg: var(--nyf-tag-warning-bg);
  --nyf-badge-warning-border: var(--nyf-tag-warning-border);
  --nyf-badge-warning-text: var(--nyf-tag-warning-value);
  --nyf-badge-danger-bg: var(--nyf-tag-danger-bg);
  --nyf-badge-danger-border: var(--nyf-tag-danger-border);
  --nyf-badge-danger-text: var(--nyf-tag-danger-value);

  /* Charts: series in order, then grid, axis, tooltip and threshold line */
  --nyf-chart-1: #33658a;
  --nyf-chart-2: #e0570f;
  --nyf-chart-3: #0f8a6a;
  --nyf-chart-4: #9c4fc4;
  --nyf-chart-5: #5c4300;
  --nyf-chart-6: #7f0d3f;
  --nyf-chart-grid: #e2e8f0;
  --nyf-chart-axis: #475569;
  --nyf-chart-tooltip-bg: #2f4858;
  --nyf-chart-tooltip-text: #ffffff;
  --nyf-chart-tooltip-border: #21333e;
  --nyf-chart-threshold: var(--nyf-danger);

  /* Surface & Canvas System - Light Mode */
  --nyf-bg: #f8fafc;
  --nyf-surface: #ffffff;
  --nyf-surface-subtle: #f1f5f9;
  --nyf-surface-card: #ffffff;
  --nyf-border: #e2e8f0;
  --nyf-border-hover: #cbd5e1;

  /* Typography Colors - Light Mode */
  --nyf-text: #2f4858;
  --nyf-text-secondary: #475569;
  --nyf-text-muted: #5b6b80;
  --nyf-text-inverse: #ffffff;

  /* Shadows */
  --nyf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --nyf-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --nyf-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --nyf-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

  /* Border Radii */
  --nyf-radius-sm: 6px;
  --nyf-radius-md: 10px;
  --nyf-radius-lg: 16px;
  --nyf-radius-full: 9999px;

  /* Transitions */
  --nyf-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;

  /* ========================================================================
     shadcn/ui Canonical Tokens (Light Mode HSL)
     ======================================================================== */
  --background: 210 40% 98%;           /* #f8fafc */
  --foreground: 203 30% 26%;           /* #2f4858 */
  --card: 0 0% 100%;                   /* #ffffff */
  --card-foreground: 203 30% 26%;      /* #2f4858 */
  --popover: 0 0% 100%;                /* #ffffff */
  --popover-foreground: 203 30% 26%;   /* #2f4858 */
  --primary: 206 46% 37%;              /* Steel Blue #33658a */
  --primary-foreground: 0 0% 100%;     /* #ffffff */
  --secondary: 201 51% 69%;            /* Sky Blue #86bbd8 */
  --secondary-foreground: 203 30% 26%; /* #2f4858 */
  --muted: 210 40% 96.1%;              /* #f1f5f9 */
  --muted-foreground: 215 17% 43%;     /* #5b6b80 */
  --accent: 201 51% 94%;               /* Sky Tint */
  --accent-foreground: 206 46% 37%;    /* #33658a */
  --destructive: 350 74% 45%;           /* Crimson #c81e3a */
  --destructive-foreground: 0 0% 100%; /* #ffffff */
  --border: 214.3 31.8% 91.4%;         /* #e2e8f0 */
  --input: 214.3 31.8% 91.4%;          /* #e2e8f0 */
  --ring: 206 46% 37%;                 /* Steel Blue */
  --radius: 0.5rem;
}

.dark, [data-theme="dark"] {
  /* Semantic Aliases - Dark Mode */
  --nyf-primary: var(--nyf-color-sky-blue);
  --nyf-primary-hover: #9ec9e2;
  --nyf-primary-light: #b4d5e8;
  --nyf-primary-foreground: #060a17;

  --nyf-secondary: #3d5c70;
  --nyf-secondary-foreground: #f1f5f9;

  --nyf-neutral: #060a17;
  --nyf-neutral-foreground: #f8fafc;

  --nyf-warning: var(--nyf-color-amber);
  --nyf-warning-hover: #ffbf47;
  --nyf-warning-foreground: #060a17;

  --nyf-cta: var(--nyf-color-tangerine);
  --nyf-cta-hover: #ff7832;
  --nyf-cta-foreground: #060a17;

  --nyf-success: #34d399;
  --nyf-success-hover: #10b981;
  --nyf-success-foreground: #060a17;

  --nyf-focus-ring: var(--nyf-color-sky-blue);

  /* Danger: destructive actions, failures, exceeded budgets */
  --nyf-danger: #fb7185;
  --nyf-danger-hover: #fda4af;
  --nyf-danger-foreground: #060a17;
  --nyf-danger-tint: #3b1019;
  --nyf-danger-border: #7f1d32;

  /* Colored text: use these, not the fills, for text on surfaces */
  --nyf-success-text: #34d399;
  --nyf-warning-text: #f6ae2d;
  --nyf-cta-text: #fb8a4d;
  --nyf-danger-text: #fda4af;

  /* Tags: opaque fills, key and value text each reach 4.5:1 */
  --nyf-tag-neutral-bg: #1e293b;
  --nyf-tag-neutral-border: #334155;
  --nyf-tag-neutral-key: #b6c2d2;
  --nyf-tag-neutral-value: #f1f5f9;
  --nyf-tag-info-bg: #12304a;
  --nyf-tag-info-border: #2a5778;
  --nyf-tag-info-key: #a8d2ea;
  --nyf-tag-info-value: #e3f2fb;
  --nyf-tag-success-bg: #0b3327;
  --nyf-tag-success-border: #17634a;
  --nyf-tag-success-key: #6ee7b7;
  --nyf-tag-success-value: #d1fae5;
  --nyf-tag-warning-bg: #3a2a08;
  --nyf-tag-warning-border: #7a5a12;
  --nyf-tag-warning-key: #fbd16b;
  --nyf-tag-warning-value: #fef3c7;
  --nyf-tag-danger-bg: #3b1019;
  --nyf-tag-danger-border: #7f1d32;
  --nyf-tag-danger-key: #fda4af;
  --nyf-tag-danger-value: #ffe4e8;

  /* Badges: follow the tag of the same variant */
  --nyf-badge-neutral-bg: var(--nyf-tag-neutral-bg);
  --nyf-badge-neutral-border: var(--nyf-tag-neutral-border);
  --nyf-badge-neutral-text: var(--nyf-tag-neutral-value);
  --nyf-badge-info-bg: var(--nyf-tag-info-bg);
  --nyf-badge-info-border: var(--nyf-tag-info-border);
  --nyf-badge-info-text: var(--nyf-tag-info-value);
  --nyf-badge-success-bg: var(--nyf-tag-success-bg);
  --nyf-badge-success-border: var(--nyf-tag-success-border);
  --nyf-badge-success-text: var(--nyf-tag-success-value);
  --nyf-badge-warning-bg: var(--nyf-tag-warning-bg);
  --nyf-badge-warning-border: var(--nyf-tag-warning-border);
  --nyf-badge-warning-text: var(--nyf-tag-warning-value);
  --nyf-badge-danger-bg: var(--nyf-tag-danger-bg);
  --nyf-badge-danger-border: var(--nyf-tag-danger-border);
  --nyf-badge-danger-text: var(--nyf-tag-danger-value);

  /* Charts: series in order, then grid, axis, tooltip and threshold line */
  --nyf-chart-1: #86bbd8;
  --nyf-chart-2: #f6923f;
  --nyf-chart-3: #34d399;
  --nyf-chart-4: #c084fc;
  --nyf-chart-5: #fef3a0;
  --nyf-chart-6: #f43f5e;
  --nyf-chart-grid: #1e293b;
  --nyf-chart-axis: #b6c2d2;
  --nyf-chart-tooltip-bg: #f1f5f9;
  --nyf-chart-tooltip-text: #0b132b;
  --nyf-chart-tooltip-border: #cbd5e1;
  --nyf-chart-threshold: var(--nyf-danger);

  /* Surface & Canvas System - Dark Mode */
  --nyf-bg: #060a17;
  --nyf-surface: #0b132b;
  --nyf-surface-subtle: #111c3d;
  --nyf-surface-card: #0f1936;
  --nyf-border: #1e293b;
  --nyf-border-hover: #334155;

  /* Typography Colors - Dark Mode */
  --nyf-text: #f8fafc;
  --nyf-text-secondary: #94a3b8;
  --nyf-text-muted: #8b9bb0;
  --nyf-text-inverse: #060a17;

  /* Dark Shadows */
  --nyf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --nyf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --nyf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --nyf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

  /* ========================================================================
     shadcn/ui Canonical Tokens (Dark Mode HSL)
     ======================================================================== */
  --background: 226 58% 6%;            /* Midnight Navy #060a17 */
  --foreground: 210 40% 98%;           /* #f8fafc */
  --card: 224 59% 11%;                 /* #0b132b */
  --card-foreground: 210 40% 98%;      /* #f8fafc */
  --popover: 224 59% 11%;              /* #0b132b */
  --popover-foreground: 210 40% 98%;   /* #f8fafc */
  --primary: 201 51% 69%;              /* Sky Blue #86bbd8 in dark */
  --primary-foreground: 226 58% 6%;    /* #060a17 */
  --secondary: 203 30% 26%;            /* Deep Slate #2f4858 */
  --secondary-foreground: 210 40% 98%; /* #f8fafc */
  --muted: 224 40% 16%;                /* #111c3d */
  --muted-foreground: 215 20% 65%;     /* #94a3b8 */
  --accent: 224 40% 16%;               /* #111c3d */
  --accent-foreground: 210 40% 98%;    /* #f8fafc */
  --destructive: 351 95% 71%;           /* Crimson (dark) #fb7185 */
  --destructive-foreground: 226 58% 6%; /* #060a17 */
  --border: 217 33% 17%;               /* #1e293b */
  --input: 217 33% 17%;                /* #1e293b */
  --ring: 201 51% 69%;                 /* Sky Blue */
}

/* ========================================================================
   Multi-Palette Themes System
   Source Coolors.co presets:
   1. default:  https://coolors.co/33658a-86bbd8-2f4858-f6ae2d-f26419
   2. desert:   https://coolors.co/464d77-36827f-f9db6d-f4eded-877666
   3. alma:     https://coolors.co/bdd9bf-2e4052-ffc857-ffffff-412234
   4. sea:      https://coolors.co/963484-3066be-60afff-28c2ff-2af5ff
   5. belge:    https://coolors.co/177e89-084c61-db3a34-ffc857-323031
   6. grey:     https://coolors.co/e0e2db-d2d4c8-b8bdb5-889696-5f7470
   7. simple:   https://coolors.co/1c1c1c-daddd8-ecebe4-eef0f2-fafaff
   8. africa:   https://coolors.co/fb6107-f3de2c-7cb518-5c8001-fbb02d
   9. forest:   https://coolors.co/f7fff6-bcebcb-87d68d-93b48b-8491a3
   10. original: https://coolors.co/0b132b-c5a880-e5ca9e-977748-f5e6d0
   11. pro:     https://coolors.co/0b132b-1e3a8a-3b82f6-d4af37-f8fafc
   12. prestige: https://coolors.co/4a1525-c5a880-8b263e-1a0b10-fdf8f3
   ======================================================================== */

/* 2. Desert Palette (https://coolors.co/464d77-36827f-f9db6d-f4eded-877666) */
:root[data-palette="desert"], html[data-palette="desert"] {
  --nyf-primary: #464d77;
  --nyf-primary-hover: #363c5d;
  --nyf-primary-light: #5b6399;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #36827f;
  --nyf-secondary-foreground: #ffffff;
  --nyf-neutral: #877666;
  --nyf-neutral-foreground: #060a17;
  --nyf-warning: #f9db6d;
  --nyf-warning-hover: #f7d247;
  --nyf-warning-foreground: #464d77;
  --nyf-cta: #36827f;
  --nyf-cta-hover: #296663;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #36827f;
  --nyf-text: #2c304a;
  --nyf-bg: #f9f6f6;
  --nyf-surface-subtle: #f4eded;
  --primary: 232 26% 37%;
  --secondary: 178 41% 36%;
  --ring: 232 26% 37%;
  --secondary-foreground: 0 0% 100%;
}
.dark[data-palette="desert"], html.dark[data-palette="desert"], [data-theme="dark"][data-palette="desert"] {
  --nyf-primary: #f9db6d;
  --nyf-primary-hover: #fbe695;
  --nyf-primary-light: #fef0be;
  --nyf-primary-foreground: #141724;
  --nyf-secondary: #36827f;
  --nyf-secondary-foreground: #ffffff;
  --nyf-neutral: #141724;
  --nyf-neutral-foreground: #f4eded;
  --nyf-warning: #f9db6d;
  --nyf-warning-hover: #fae38b;
  --nyf-warning-foreground: #141724;
  --nyf-cta: #36827f;
  --nyf-cta-hover: #37827e;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #f9db6d;
  --nyf-text: #f4eded;
  --nyf-bg: #0f111a;
  --nyf-surface: #181c2b;
  --nyf-surface-subtle: #23283d;
  --nyf-border: #2d344f;
  --primary: 47 91% 70%;
  --secondary: 178 41% 36%;
  --ring: 47 91% 70%;
  --secondary-foreground: 0 0% 100%;
}

/* 3. Alma Palette (https://coolors.co/bdd9bf-2e4052-ffc857-ffffff-412234) */
:root[data-palette="alma"], html[data-palette="alma"] {
  --nyf-primary: #2e4052;
  --nyf-primary-hover: #1f2c38;
  --nyf-primary-light: #415a73;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #bdd9bf;
  --nyf-secondary-foreground: #2e4052;
  --nyf-neutral: #412234;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #ffc857;
  --nyf-warning-hover: #ffbb2e;
  --nyf-warning-foreground: #412234;
  --nyf-cta: #412234;
  --nyf-cta-hover: #2e1825;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #ffc857;
  --nyf-text: #2e4052;
  --nyf-bg: #f8faf8;
  --nyf-surface-subtle: #eef5ef;
  --primary: 210 28% 25%;
  --secondary: 123 27% 80%;
  --ring: 40 100% 67%;
}
.dark[data-palette="alma"], html.dark[data-palette="alma"], [data-theme="dark"][data-palette="alma"] {
  --nyf-primary: #ffc857;
  --nyf-primary-hover: #ffd67d;
  --nyf-primary-light: #ffe3a3;
  --nyf-primary-foreground: #1c0e17;
  --nyf-secondary: #bdd9bf;
  --nyf-secondary-foreground: #1c0e17;
  --nyf-neutral: #1a0d15;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #ffc857;
  --nyf-warning-hover: #ffd67d;
  --nyf-warning-foreground: #1c0e17;
  --nyf-cta: #bdd9bf;
  --nyf-cta-hover: #cfe4d1;
  --nyf-cta-foreground: #1c0e17;
  --nyf-focus-ring: #ffc857;
  --nyf-text: #ffffff;
  --nyf-bg: #12090f;
  --nyf-surface: #1e101a;
  --nyf-surface-subtle: #2b1825;
  --nyf-border: #3b2234;
  --primary: 40 100% 67%;
  --secondary: 123 27% 80%;
  --ring: 40 100% 67%;
  --secondary-foreground: 226 59% 6%;
}

/* 4. Sea Palette (https://coolors.co/963484-3066be-60afff-28c2ff-2af5ff) */
:root[data-palette="sea"], html[data-palette="sea"] {
  --nyf-primary: #3066be;
  --nyf-primary-hover: #234c8f;
  --nyf-primary-light: #5283d3;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #60afff;
  --nyf-secondary-foreground: #0e203d;
  --nyf-neutral: #101c30;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #28c2ff;
  --nyf-warning-hover: #0abbff;
  --nyf-warning-foreground: #0e203d;
  --nyf-cta: #963484;
  --nyf-cta-hover: #7b2a6c;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #28c2ff;
  --nyf-text: #0e203d;
  --nyf-bg: #f5faff;
  --nyf-surface-subtle: #e6f3ff;
  --primary: 217 60% 47%;
  --secondary: 210 100% 69%;
  --ring: 197 100% 58%;
  --secondary-foreground: 226 59% 6%;
}
.dark[data-palette="sea"], html.dark[data-palette="sea"], [data-theme="dark"][data-palette="sea"] {
  --nyf-primary: #2af5ff;
  --nyf-primary-hover: #63f7ff;
  --nyf-primary-light: #9cfaff;
  --nyf-primary-foreground: #071221;
  --nyf-secondary: #60afff;
  --nyf-secondary-foreground: #071221;
  --nyf-neutral: #071221;
  --nyf-neutral-foreground: #f0f8ff;
  --nyf-warning: #28c2ff;
  --nyf-warning-hover: #57cfff;
  --nyf-warning-foreground: #071221;
  --nyf-cta: #963484;
  --nyf-cta-hover: #ba4aa5;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #2af5ff;
  --nyf-text: #f0f8ff;
  --nyf-bg: #050e1a;
  --nyf-surface: #0a1c33;
  --nyf-surface-subtle: #112a4a;
  --nyf-border: #1a3c66;
  --primary: 182 100% 58%;
  --secondary: 210 100% 69%;
  --ring: 182 100% 58%;
  --secondary-foreground: 226 59% 6%;
}

/* 5. Belge Palette (https://coolors.co/177e89-084c61-db3a34-ffc857-323031) */
:root[data-palette="belge"], html[data-palette="belge"] {
  --nyf-primary: #167984;
  --nyf-primary-hover: #105961;
  --nyf-primary-light: #209da9;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #084c61;
  --nyf-secondary-foreground: #ffffff;
  --nyf-neutral: #323031;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #ffc857;
  --nyf-warning-hover: #ffbb2e;
  --nyf-warning-foreground: #323031;
  --nyf-cta: #da352f;
  --nyf-cta-hover: #b82d27;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #177e89;
  --nyf-text: #323031;
  --nyf-bg: #fcfbf9;
  --nyf-surface-subtle: #f5f2ed;
  --primary: 186 71% 30%;
  --secondary: 194 85% 21%;
  --ring: 186 71% 31%;
  --secondary-foreground: 0 0% 100%;
}
.dark[data-palette="belge"], html.dark[data-palette="belge"], [data-theme="dark"][data-palette="belge"] {
  --nyf-primary: #ffc857;
  --nyf-primary-hover: #ffd67d;
  --nyf-primary-light: #ffe3a3;
  --nyf-primary-foreground: #1a1718;
  --nyf-secondary: #177e89;
  --nyf-secondary-foreground: #fcfbf9;
  --nyf-neutral: #171516;
  --nyf-neutral-foreground: #fcfbf9;
  --nyf-warning: #ffc857;
  --nyf-warning-hover: #ffd67d;
  --nyf-warning-foreground: #1a1718;
  --nyf-cta: #da352f;
  --nyf-cta-hover: #dd322d;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #ffc857;
  --nyf-text: #fcfbf9;
  --nyf-bg: #100f10;
  --nyf-surface: #1d1b1c;
  --nyf-surface-subtle: #292628;
  --nyf-border: #3d393b;
  --primary: 40 100% 67%;
  --secondary: 186 71% 31%;
  --ring: 40 100% 67%;
}

/* 6. Grey Palette (https://coolors.co/e0e2db-d2d4c8-b8bdb5-889696-5f7470) */
:root[data-palette="grey"], html[data-palette="grey"] {
  --nyf-primary: #536864;
  --nyf-primary-hover: #495a57;
  --nyf-primary-light: #778f8b;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #889696;
  --nyf-secondary-foreground: #060a17;
  --nyf-neutral: #283130;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #b8bdb5;
  --nyf-warning-hover: #a5aba1;
  --nyf-warning-foreground: #283130;
  --nyf-cta: #5f7470;
  --nyf-cta-hover: #475855;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #889696;
  --nyf-text: #283130;
  --nyf-bg: #f8f9f7;
  --nyf-surface-subtle: #e0e2db;
  --primary: 169 11% 37%;
  --secondary: 180 6% 56%;
  --ring: 180 6% 56%;
  --secondary-foreground: 226 59% 6%;
  --nyf-text-muted: #556578;
  --nyf-success-text: #047253;
  --nyf-cta-text: #ac3d06;
}
.dark[data-palette="grey"], html.dark[data-palette="grey"], [data-theme="dark"][data-palette="grey"] {
  --nyf-primary: #b8bdb5;
  --nyf-primary-hover: #cbcfc9;
  --nyf-primary-light: #dee0dc;
  --nyf-primary-foreground: #141818;
  --nyf-secondary: #889696;
  --nyf-secondary-foreground: #141818;
  --nyf-neutral: #141818;
  --nyf-neutral-foreground: #e0e2db;
  --nyf-warning: #d2d4c8;
  --nyf-warning-hover: #e2e4db;
  --nyf-warning-foreground: #141818;
  --nyf-cta: #889696;
  --nyf-cta-hover: #a3afaf;
  --nyf-cta-foreground: #141818;
  --nyf-focus-ring: #b8bdb5;
  --nyf-text: #e0e2db;
  --nyf-bg: #0f1212;
  --nyf-surface: #191e1e;
  --nyf-surface-subtle: #242b2a;
  --nyf-border: #343d3c;
  --primary: 100 5% 73%;
  --secondary: 180 6% 56%;
  --ring: 100 5% 73%;
  --secondary-foreground: 226 59% 6%;
  --nyf-text-muted: #8b9bb0;
  --nyf-success-text: #34d399;
  --nyf-cta-text: #fb8a4d;
}

/* 7. Simple Palette (https://coolors.co/1c1c1c-daddd8-ecebe4-eef0f2-fafaff) */
:root[data-palette="simple"], html[data-palette="simple"] {
  --nyf-primary: #1c1c1c;
  --nyf-primary-hover: #333333;
  --nyf-primary-light: #474747;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #6e7379;
  --nyf-secondary-foreground: #ffffff;
  --nyf-neutral: #1c1c1c;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #daddd8;
  --nyf-warning-hover: #c8cbc6;
  --nyf-warning-foreground: #1c1c1c;
  --nyf-cta: #1c1c1c;
  --nyf-cta-hover: #000000;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #1c1c1c;
  --nyf-text: #1c1c1c;
  --nyf-bg: #fafaff;
  --nyf-surface-subtle: #ecebe4;
  --primary: 0 0% 11%;
  --secondary: 213 5% 45%;
  --ring: 0 0% 11%;
  --secondary-foreground: 0 0% 100%;
}
.dark[data-palette="simple"], html.dark[data-palette="simple"], [data-theme="dark"][data-palette="simple"] {
  --nyf-primary: #fafaff;
  --nyf-primary-hover: #ffffff;
  --nyf-primary-light: #ffffff;
  --nyf-primary-foreground: #0d0d0d;
  --nyf-secondary: #daddd8;
  --nyf-secondary-foreground: #0d0d0d;
  --nyf-neutral: #0d0d0d;
  --nyf-neutral-foreground: #fafaff;
  --nyf-warning: #ecebe4;
  --nyf-warning-hover: #fafaff;
  --nyf-warning-foreground: #0d0d0d;
  --nyf-cta: #fafaff;
  --nyf-cta-hover: #eef0f2;
  --nyf-cta-foreground: #0d0d0d;
  --nyf-focus-ring: #fafaff;
  --nyf-text: #fafaff;
  --nyf-bg: #0d0d0d;
  --nyf-surface: #171717;
  --nyf-surface-subtle: #242424;
  --nyf-border: #333333;
  --primary: 240 100% 99%;
  --secondary: 86 6% 86%;
  --ring: 240 100% 99%;
  --secondary-foreground: 226 59% 6%;
}

/* 8. Africa Palette (https://coolors.co/fb6107-f3de2c-7cb518-5c8001-fbb02d) */
:root[data-palette="africa"], html[data-palette="africa"] {
  --nyf-primary: #587a01;
  --nyf-primary-hover: #456001;
  --nyf-primary-light: #76a301;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #7cb518;
  --nyf-secondary-foreground: #060a17;
  --nyf-neutral: #291e01;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #f3de2c;
  --nyf-warning-hover: #ecd516;
  --nyf-warning-foreground: #291e01;
  --nyf-cta: #fb6107;
  --nyf-cta-hover: #d74f02;
  --nyf-cta-foreground: #060a17;
  --nyf-focus-ring: #7cb518;
  --nyf-text: #291e01;
  --nyf-bg: #fdfcf7;
  --nyf-surface-subtle: #f9f5e6;
  --primary: 77 98% 24%;
  --secondary: 82 77% 40%;
  --ring: 77 98% 25%;
  --secondary-foreground: 226 59% 6%;
}
.dark[data-palette="africa"], html.dark[data-palette="africa"], [data-theme="dark"][data-palette="africa"] {
  --nyf-primary: #f3de2c;
  --nyf-primary-hover: #f7e657;
  --nyf-primary-light: #faee86;
  --nyf-primary-foreground: #120c01;
  --nyf-secondary: #7cb518;
  --nyf-secondary-foreground: #120c01;
  --nyf-neutral: #120c01;
  --nyf-neutral-foreground: #fffdfa;
  --nyf-warning: #fbb02d;
  --nyf-warning-hover: #fcc056;
  --nyf-warning-foreground: #120c01;
  --nyf-cta: #fb6107;
  --nyf-cta-hover: #fc7a2f;
  --nyf-cta-foreground: #060a17;
  --nyf-focus-ring: #f3de2c;
  --nyf-text: #fffdfa;
  --nyf-bg: #100b02;
  --nyf-surface: #1e1505;
  --nyf-surface-subtle: #2b1f09;
  --nyf-border: #423010;
  --primary: 54 90% 56%;
  --secondary: 82 77% 40%;
  --ring: 54 90% 56%;
  --secondary-foreground: 226 59% 6%;
}

/* 9. Forest Palette (https://coolors.co/f7fff6-bcebcb-87d68d-93b48b-8491a3) */
:root[data-palette="forest"], html[data-palette="forest"] {
  --nyf-primary: #39663d;
  --nyf-primary-hover: #294c2d;
  --nyf-primary-light: #4c8252;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #87d68d;
  --nyf-secondary-foreground: #1a261c;
  --nyf-neutral: #1a261c;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #93b48b;
  --nyf-warning-hover: #7ea375;
  --nyf-warning-foreground: #1a261c;
  --nyf-cta: #8491a3;
  --nyf-cta-hover: #6d7b8f;
  --nyf-cta-foreground: #060a17;
  --nyf-focus-ring: #87d68d;
  --nyf-text: #1a261c;
  --nyf-bg: #f9fdf9;
  --nyf-surface-subtle: #edf7ed;
  --primary: 125 28% 31%;
  --secondary: 124 51% 69%;
  --ring: 125 28% 31%;
}
.dark[data-palette="forest"], html.dark[data-palette="forest"], [data-theme="dark"][data-palette="forest"] {
  --nyf-primary: #87d68d;
  --nyf-primary-hover: #a1e0a6;
  --nyf-primary-light: #bde9c1;
  --nyf-primary-foreground: #0d170e;
  --nyf-secondary: #bcebcb;
  --nyf-secondary-foreground: #0d170e;
  --nyf-neutral: #0d170e;
  --nyf-neutral-foreground: #f7fff6;
  --nyf-warning: #bcebcb;
  --nyf-warning-hover: #d2f2dc;
  --nyf-warning-foreground: #0d170e;
  --nyf-cta: #8491a3;
  --nyf-cta-hover: #9ca6b5;
  --nyf-cta-foreground: #060a17;
  --nyf-focus-ring: #87d68d;
  --nyf-text: #f7fff6;
  --nyf-bg: #0a110b;
  --nyf-surface: #142115;
  --nyf-surface-subtle: #1c2e1e;
  --nyf-border: #28422a;
  --primary: 124 51% 69%;
  --secondary: 139 52% 83%;
  --ring: 124 51% 69%;
  --secondary-foreground: 226 59% 6%;
}

/* 10. Original Palette (Nooyf Sovereign Gold) (https://coolors.co/0b132b-c5a880-e5ca9e-977748-f5e6d0) */
:root[data-palette="original"], html[data-palette="original"] {
  --nyf-primary: #83683e;
  --nyf-primary-hover: #7d6139;
  --nyf-primary-light: #b08d5b;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #c5a880;
  --nyf-secondary-foreground: #0b132b;
  --nyf-neutral: #0b132b;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #e5ca9e;
  --nyf-warning-hover: #dfbc86;
  --nyf-warning-foreground: #0b132b;
  --nyf-cta: #b8860b;
  --nyf-cta-hover: #9f7208;
  --nyf-cta-foreground: #060a17;
  --nyf-focus-ring: #c5a880;
  --nyf-text: #0b132b;
  --nyf-bg: #fdfbf7;
  --nyf-surface: #ffffff;
  --nyf-surface-subtle: #f5eedf;
  --nyf-border: #e6dac6;
  --primary: 36 36% 38%;
  --secondary: 35 39% 64%;
  --ring: 35 35% 44%;
  --primary-foreground: 0 0% 100%;
  --secondary-foreground: 226 59% 6%;
}
.dark[data-palette="original"], html.dark[data-palette="original"], [data-theme="dark"][data-palette="original"] {
  --nyf-primary: #c5a880;
  --nyf-primary-hover: #d7be9b;
  --nyf-primary-light: #e5ca9e;
  --nyf-primary-foreground: #060a17;
  --nyf-secondary: #e5ca9e;
  --nyf-secondary-foreground: #060a17;
  --nyf-neutral: #060a17;
  --nyf-neutral-foreground: #f5e6d0;
  --nyf-warning: #f5e6d0;
  --nyf-warning-hover: #fcf4ea;
  --nyf-warning-foreground: #060a17;
  --nyf-cta: #e5ca9e;
  --nyf-cta-hover: #f0ddbe;
  --nyf-cta-foreground: #060a17;
  --nyf-focus-ring: #c5a880;
  --nyf-text: #f5e6d0;
  --nyf-bg: #070c1a;
  --nyf-surface: #0b132b;
  --nyf-surface-subtle: #141f3d;
  --nyf-border: #23335d;
  --primary: 35 39% 64%;
  --secondary: 37 57% 76%;
  --ring: 35 39% 64%;
  --secondary-foreground: 226 59% 6%;
  --primary-foreground: 226 59% 6%;
}

/* 11. Pro Palette (Executive Sapphire) (https://coolors.co/0b132b-1e3a8a-3b82f6-d4af37-f8fafc) */
:root[data-palette="pro"], html[data-palette="pro"] {
  --nyf-primary: #1e3a8a;
  --nyf-primary-hover: #172554;
  --nyf-primary-light: #2563eb;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #3b82f6;
  --nyf-secondary-foreground: #060a17;
  --nyf-neutral: #0b132b;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #d4af37;
  --nyf-warning-hover: #c49d28;
  --nyf-warning-foreground: #0b132b;
  --nyf-cta: #2563eb;
  --nyf-cta-hover: #1d4ed8;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #3b82f6;
  --nyf-text: #0f172a;
  --nyf-bg: #f8fafc;
  --nyf-surface: #ffffff;
  --nyf-surface-subtle: #eff4fa;
  --nyf-border: #dbe4f0;
  --primary: 224 64% 33%;
  --secondary: 217 91% 60%;
  --ring: 224 64% 33%;
  --secondary-foreground: 226 59% 6%;
}
.dark[data-palette="pro"], html.dark[data-palette="pro"], [data-theme="dark"][data-palette="pro"] {
  --nyf-primary: #60a5fa;
  --nyf-primary-hover: #93c5fd;
  --nyf-primary-light: #bfdbfe;
  --nyf-primary-foreground: #050914;
  --nyf-secondary: #d4af37;
  --nyf-secondary-foreground: #050914;
  --nyf-neutral: #050914;
  --nyf-neutral-foreground: #f8fafc;
  --nyf-warning: #d4af37;
  --nyf-warning-hover: #e2c45e;
  --nyf-warning-foreground: #050914;
  --nyf-cta: #3b82f6;
  --nyf-cta-hover: #60a5fa;
  --nyf-cta-foreground: #060a17;
  --nyf-focus-ring: #60a5fa;
  --nyf-text: #f1f5f9;
  --nyf-bg: #050914;
  --nyf-surface: #0b132b;
  --nyf-surface-subtle: #131e3d;
  --nyf-border: #1e2e58;
  --primary: 213 94% 68%;
  --secondary: 46 65% 52%;
  --ring: 213 94% 68%;
  --secondary-foreground: 226 59% 6%;
}

/* 12. Prestige Palette (Imperial Burgundy & Gold) (https://coolors.co/4a1525-c5a880-8b263e-1a0b10-fdf8f3) */
:root[data-palette="prestige"], html[data-palette="prestige"] {
  --nyf-primary: #6e1d30;
  --nyf-primary-hover: #541423;
  --nyf-primary-light: #8b263e;
  --nyf-primary-foreground: #ffffff;
  --nyf-secondary: #c5a880;
  --nyf-secondary-foreground: #1a0b10;
  --nyf-neutral: #1a0b10;
  --nyf-neutral-foreground: #ffffff;
  --nyf-warning: #c5a880;
  --nyf-warning-hover: #b8976a;
  --nyf-warning-foreground: #1a0b10;
  --nyf-cta: #8b263e;
  --nyf-cta-hover: #701c30;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #c5a880;
  --nyf-text: #240e16;
  --nyf-bg: #fdfaf7;
  --nyf-surface: #ffffff;
  --nyf-surface-subtle: #f8f1ea;
  --nyf-border: #e9dcce;
  --primary: 346 58% 27%;
  --secondary: 35 39% 64%;
  --ring: 346 58% 27%;
  --secondary-foreground: 226 59% 6%;
}
.dark[data-palette="prestige"], html.dark[data-palette="prestige"], [data-theme="dark"][data-palette="prestige"] {
  --nyf-primary: #e5ca9e;
  --nyf-primary-hover: #eedab7;
  --nyf-primary-light: #f5e6d0;
  --nyf-primary-foreground: #0c0407;
  --nyf-secondary: #c5a880;
  --nyf-secondary-foreground: #0c0407;
  --nyf-neutral: #0c0407;
  --nyf-neutral-foreground: #fdf8f3;
  --nyf-warning: #e5ca9e;
  --nyf-warning-hover: #eedab7;
  --nyf-warning-foreground: #0c0407;
  --nyf-cta: #b33951;
  --nyf-cta-hover: #c94a63;
  --nyf-cta-foreground: #ffffff;
  --nyf-focus-ring: #e5ca9e;
  --nyf-text: #fbf0ea;
  --nyf-bg: #0c0407;
  --nyf-surface: #18090f;
  --nyf-surface-subtle: #26111a;
  --nyf-border: #3d1b28;
  --primary: 37 57% 76%;
  --secondary: 35 39% 64%;
  --ring: 37 57% 76%;
  --secondary-foreground: 226 59% 6%;
}

/* ========================================================================
   Dark Theme Variants
   Set data-dark-variant on <html>. Only surfaces and neutral text change, so
   they combine with any palette. Without the attribute, a palette keeps its
   own dark surfaces.
   ======================================================================== */
html.dark[data-dark-variant="blue"], html[data-theme="dark"][data-dark-variant="blue"] {
  --nyf-bg: #060a17;
  --nyf-surface: #0b132b;
  --nyf-surface-subtle: #111c3d;
  --nyf-surface-card: #0f1936;
  --nyf-border: #1e293b;
  --nyf-border-hover: #334155;
  --nyf-text-secondary: #94a3b8;
  --nyf-text-muted: #8b9bb0;
  --nyf-text-inverse: #060a17;
  --nyf-neutral: #060a17;
  --nyf-chart-grid: #1e293b;
  --background: 226 59% 6%;
  --card: 225 59% 11%;
  --popover: 225 59% 11%;
  --muted: 225 56% 15%;
  --muted-foreground: 215 20% 65%;
  --accent: 225 56% 15%;
  --border: 217 33% 17%;
  --input: 217 33% 17%;
}
html.dark[data-dark-variant="black"], html[data-theme="dark"][data-dark-variant="black"] {
  --nyf-bg: #050505;
  --nyf-surface: #0e0e10;
  --nyf-surface-subtle: #1a1a1d;
  --nyf-surface-card: #141416;
  --nyf-border: #2a2a2e;
  --nyf-border-hover: #3f3f46;
  --nyf-text-secondary: #a8a8b0;
  --nyf-text-muted: #909098;
  --nyf-text-inverse: #050505;
  --nyf-neutral: #050505;
  --nyf-chart-grid: #2a2a2e;
  --background: 0 0% 2%;
  --card: 240 7% 6%;
  --popover: 240 7% 6%;
  --muted: 240 5% 11%;
  --muted-foreground: 240 5% 67%;
  --accent: 240 5% 11%;
  --border: 240 5% 17%;
  --input: 240 5% 17%;
}
html.dark[data-dark-variant="green"], html[data-theme="dark"][data-dark-variant="green"] {
  --nyf-bg: #030b08;
  --nyf-surface: #06130e;
  --nyf-surface-subtle: #0c1e16;
  --nyf-surface-card: #091812;
  --nyf-border: #17302a;
  --nyf-border-hover: #28493c;
  --nyf-text-secondary: #9dbcab;
  --nyf-text-muted: #86a594;
  --nyf-text-inverse: #030b08;
  --nyf-neutral: #030b08;
  --nyf-chart-grid: #17302a;
  --background: 158 57% 3%;
  --card: 157 52% 5%;
  --popover: 157 52% 5%;
  --muted: 153 43% 8%;
  --muted-foreground: 147 19% 68%;
  --accent: 153 43% 8%;
  --border: 166 35% 14%;
  --input: 166 35% 14%;
}
html.dark[data-dark-variant="orange"], html[data-theme="dark"][data-dark-variant="orange"] {
  --nyf-bg: #0f0701;
  --nyf-surface: #180b03;
  --nyf-surface-subtle: #261305;
  --nyf-surface-card: #1e0e04;
  --nyf-border: #3d2109;
  --nyf-border-hover: #5a3312;
  --nyf-text-secondary: #c9ab92;
  --nyf-text-muted: #b0917a;
  --nyf-text-inverse: #0f0701;
  --nyf-neutral: #0f0701;
  --nyf-chart-grid: #3d2109;
  --background: 26 88% 3%;
  --card: 23 78% 5%;
  --popover: 23 78% 5%;
  --muted: 25 77% 8%;
  --muted-foreground: 27 34% 68%;
  --accent: 25 77% 8%;
  --border: 28 74% 14%;
  --input: 28 74% 14%;
}