/**************** Root ****************/
:root {
  --safe-area-top: env(safe-area-inset-top, 0);
  --safe-area-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-left: env(safe-area-inset-left, 0);
  --safe-area-right: env(safe-area-inset-right, 0);

  --inner-width: 640px;

  /* --font-lexend: "Lexend", sans-serif;
  --font-outfit: "Outfit", sans-serif;
  --font-eb-garamond: "EB Garamond", serif;
  --font-dancing-script: "Dancing Script", cursive;
  --font-lora: "Lora", serif;
  --font-jetbrains: "JetBrains Mono", monospace; */

  /* --font-inter: "Inter", sans-serif;
  --font-spectral: "Spectral", serif;
  --font-playfair: "Playfair Display", serif;
  --font-source-serif: "Source Serif 4", serif;
  --font-architects: "Architects Daughter", cursive; */
  /* New ones */
  --font-opendyslexic-regular: "OpenDyslexicRegular", sans-serif;

  --font-dm-sans: "DM Sans", sans-serif;
  --font-manrope: "Manrope", sans-serif;
  --font-red-hat-display: "Red Hat Display", sans-serif;

  /* --font-sans: var(--font-inter); */
  --font-sans: var(--font-lexend);
  --font-body: var(--font-lexend);
  --font-heading: var(--font-outfit);
  --font-mono: var(--font-jetbrains);
  --font-accent: var(--font-eb-garamond);
  --font-handwritten: var(--font-dancing-script);
  --font-strong: var(--font-lora);
  --font-logo: var(--font-outfit);

  --color-primary-soft: color-mix(
    in oklab,
    var(--color-primary, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-secondary-soft: color-mix(
    in oklab,
    var(--color-secondary, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-accent-soft: color-mix(
    in oklab,
    var(--color-accent, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-base-content-soft: color-mix(
    in oklab,
    var(--color-base-content, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-success-soft: color-mix(
    in oklab,
    var(--color-success, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-warning-soft: color-mix(
    in oklab,
    var(--color-warning, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-error-soft: color-mix(
    in oklab,
    var(--color-error, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-info-soft: color-mix(
    in oklab,
    var(--color-info, var(--color-base-content)) 8%,
    var(--color-base-100)
  );

  /* More daisyUI to avoid recomputing colors */
  /* TODO: shouldnt be soft ?
   */
  --color-primary-ghost: color-mix(
    in oklab,
    var(--color-primary, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-secondary-ghost: color-mix(
    in oklab,
    var(--color-secondary, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-accent-ghost: color-mix(
    in oklab,
    var(--color-accent, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-base-content-ghost: color-mix(
    in oklab,
    var(--color-base-content, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-success-ghost: color-mix(
    in oklab,
    var(--color-success, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-warning-ghost: color-mix(
    in oklab,
    var(--color-warning, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-error-ghost: color-mix(
    in oklab,
    var(--color-error, var(--color-base-content)) 8%,
    var(--color-base-100)
  );
  --color-info-ghost: color-mix(
    in oklab,
    var(--color-info, var(--color-base-content)) 8%,
    var(--color-base-100)
  );

  --color-base-content-ghost-variant: color-mix(
    in oklab,
    var(--color-base-content, var(--color-base-content)) 2%,
    var(--color-base-100)
  );


  --color-base-150: color-mix(in oklab, var(--color-base-200) 50%, var(--color-base-100));


  --scrollbar-color: var(--color-primary);
  --scrollbar-color-bg: var(--color-primary);

  /* max-w-3xs 16rem (256px) */
  /* max-width: var(--container-3xs);  */

  /* max-w-2xs 18rem (288px) */
  /* max-width: var(--container-2xs);  */

  /* max-w-xs 20rem (320px) */
  /* max-width: var(--container-xs);  */

  /* max-w-sm 24rem (384px) */
  /* max-width: var(--container-sm);  */

  /* max-w-md 28rem (448px) */
  /* max-width: var(--container-md);  */

  /* max-w-lg 32rem (512px) */
  /* max-width: var(--container-lg);  */

  /* max-w-xl 36rem (576px) */
  /* max-width: var(--container-xl);  */

  /* max-w-2xl 42rem (672px) */
  /* max-width: var(--container-2xl);  */

  /* max-w-3xl 48rem (768px) */
  /* max-width: var(--container-3xl);  */

  /* max-w-4xl 56rem (896px) */
  /* max-width: var(--container-4xl);  */

  /* max-w-5xl 64rem (1024px) */
  /* max-width: var(--container-5xl);  */

  /* max-w-6xl 72rem (1152px) */
  /* max-width: var(--container-6xl);  */

  /* max-w-7xl 80rem (1280px) */
  /* max-width: var(--container-7xl);  */

  --trame-display-4xl-width: 896px;
  --trame-display-3xl-width: 768px;
  --trame-display-2xl-width: 672px;
  --trame-display-xl-width: 576px;
  --trame-display-lg-width: 512px;

  /* max-w-4xl */
  --trame-display-container-width: var(--trame-display-4xl-width);
  /* max-w-2xl */
  --trame-display-content-width: var(--trame-display-2xl-width);
  /* max-w-3xl */
  --trame-display-bigger-content-width: calc(
    (var(--trame-display-3xl-width) + var(--trame-display-2xl-width)) / 2
  );

  --trame-display-h1-font-size: 1.95rem;
  --trame-display-h2-font-size: 1.75rem;
  --trame-display-h3-font-size: 1.5rem;
  --trame-display-h4-font-size: 1.25rem;
  --trame-display-p-font-size: 1.075rem;

  --trame-display-h1-font-weight: 400;
  --trame-display-h2-font-weight: 400;
  --trame-display-h3-font-weight: 400;
  --trame-display-h4-font-weight: 400;
  --trame-display-p-font-weight: 300;

  /* Input-specific font sizes */
  --trame-input-font-size: var(--trame-display-p-font-size);
  --trame-input-label-font-size: var(--trame-display-p-font-size);
  --trame-button-font-size: var(--trame-display-p-font-size);
  --trame-select-font-size: var(--trame-display-p-font-size);
  --trame-mcq-option-font-size: var(--trame-display-p-font-size);
  --trame-mcq-statement-font-size: var(--trame-display-p-font-size);
  --trame-badge-font-size: var(--trame-display-p-font-size);
  --trame-ui-small-font-size: var(--trame-display-p-font-size);

  --trame-display-title-line-height: 1.2;

  --trame-display-vertical-space-between-pieces-sm: 0.5rem;
  --trame-display-vertical-space-between-pieces-md: 1.5rem;
  --trame-display-vertical-space-between-pieces-lg: 2.25rem;
  --trame-display-vertical-space-between-pieces-xl: 3rem;
  --trame-display-vertical-space-between-pieces-2xl: 4.5rem;
  --trame-display-vertical-space-between-pieces-3xl: 6rem;


  --trame-padding-safe-outer: 0.5rem;
  --trame-padding-safe-inner: 0.75rem;
  --trame-padding-safe-total: 1.25rem;
}

@media (max-width: 767px) {
  :root {
    --trame-padding-safe-outer: 0.5rem;
    --trame-padding-safe-inner: 0.75rem;
    --trame-padding-safe-total: 1.25rem;
  }
}

/* @media (max-width: 767px) { */
@media (max-width: 639px) {
  :root {
    /* --trame-display-h1-font-size: 1.55rem;
    --trame-display-h2-font-size: 1.35rem;
    --trame-display-h3-font-size: 1.15rem;
    --trame-display-h4-font-size: 1rem;
    --trame-display-p-font-size: 0.95rem; */

    /* --trame-display-title-line-height: 1; */
/* 
    --trame-display-h1-font-weight: 500;
    --trame-display-h2-font-weight: 400;
    --trame-display-h3-font-weight: 400;
    --trame-display-h4-font-weight: 400;
    --trame-display-p-font-weight: 300; */

    /* Input-specific font sizes - Mobile */
    --trame-input-font-size: var(--trame-display-p-font-size);
    --trame-input-label-font-size: var(--trame-display-p-font-size);
    --trame-button-font-size: var(--trame-display-p-font-size);
    --trame-select-font-size: var(--trame-display-p-font-size);
    --trame-mcq-option-font-size: var(--trame-display-p-font-size);
    --trame-mcq-statement-font-size: var(--trame-display-p-font-size);
    --trame-badge-font-size: var(--trame-display-p-font-size);
    --trame-ui-small-font-size: var(--trame-display-p-font-size);

    --trame-display-vertical-space-between-pieces-sm: 0.5rem;
    --trame-display-vertical-space-between-pieces-md: 1rem;
    --trame-display-vertical-space-between-pieces-lg: 1.5rem;
    --trame-display-vertical-space-between-pieces-xl: 2rem;
    --trame-display-vertical-space-between-pieces-2xl: 3rem;
    --trame-display-vertical-space-between-pieces-3xl: 4rem;
  }
}

/* @media (max-width: 420px) {
  :root {
    --trame-padding-safe-outer: 0.25rem;
    --trame-padding-safe-inner: 0.5rem;
    --trame-padding-safe-total: 0.75rem;
  }
} */

[data-theme="anchor"] {
  color-scheme: light;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  /* Almost pure white background for maximum brightness and readability */
  --color-base-100: oklch(99.5% 0.002 120);
  /* Nearly white with tiny warm hint */

  /* Subtle off-white for cards, modals, secondary backgrounds */
  /* Only slightly different from base-100 but noticeable for layering */
  /* --color-base-200: oklch(97% 0.005 120);      Very light warm gray */

  --color-base-200: oklch(96.5% 0.001 190);
  /* Very light warm gray : SEL*/

  /* More pronounced but still very light for borders, dividers */
  --color-base-300: oklch(90% 0.002 155);
  /* Light warm gray */

  /* Strong, matte dark text - not pure black but very readable */
  /* High contrast against white backgrounds for excellent readability */
  --color-base-content: oklch(22% 0.015 240);
  /* Deep charcoal with slight blue undertone */

  /* ===== PRIMARY COLORS (PURPLE THEME) ===== */
  /* Dark but vibrant purple - professional yet colorful */
  --color-primary: oklch(45% 0.18 285);
  /* Rich purple, dark enough for accessibility */

  /* Very light, almost white text for primary buttons/elements */
  /* Ensures maximum contrast against dark purple background */
  --color-primary-content: oklch(97% 0.02 285);
  /* Nearly white with purple hint */

  --color-secondary: oklch(0.563 0.2 340.55);

  /* --color-secondary: oklch(0.563 0.2 340.55); */
  /* --color-secondary: oklch(0.25 0.2 340.55);   */
  --color-secondary: oklch(0.4 0.4 340.55);
  --color-secondary-content: oklch(97% 0.02 240);
  /* Nearly white with blue hint */

  /* Vibrant teal accent - dark enough for excellent contrast on light backgrounds */
  /* Distinct from blue (info), purple (primary), and pink (secondary) */
  --color-accent: oklch(52% 0.2 180);
  /* Rich, vibrant teal */
  --color-accent-content: oklch(97% 0.02 180);
  /* Nearly white for text on teal */

  /* ===== ACCENT COLORS (STRONG GREEN THEME) ===== */
  /* Vibrant forest green for accent elements, CTAs, highlights */
  /* --color-accent: oklch(52% 0.20 150);         Strong emerald green */

  /* Very light text for accent elements */
  /* --color-accent-content: oklch(85% 0.02 150); Nearly white with green hint */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(25% 0.01 240);
  /* Dark gray for neutral elements */
  --color-neutral-content: oklch(95% 0.01 240);
  /* Light gray for text on neutral backgrounds */

  /* Dark text on neutral backgrounds */
  /* --color-neutral-content: oklch(25% 0.01 240); Dark gray for neutral text */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  /* Information blue - strong and high contrast */
  --color-info: oklch(45% 0.35 255);
  /* Vibrant, stronger blue */
  --color-info-content: oklch(100% 0 0);
  /* Pure white for maximum contrast */

  /* After cubrick update*/
  --color-success: oklch(0.5 0.1607 142.5);
  /* --color-success: oklch(62% 0.22 140); */
  /* Positive success green */
  --color-success-content: oklch(97% 0.02 140);
  /* Nearly white for success text */

  /* Warning yellow - attention-grabbing with strong contrast on white */
  /* After cubrick update*/
  /* --color-warning: oklch(0.57 0.1534 73.37); */
  --color-warning: oklch(56% 0.25 70);
  --color-warning-content: oklch(97% 0.02 70);
  /* Strong yellow-amber warning color */
  /* --color-warning-content: oklch(15% 0.05 65);  */
  /* Dark text for warning (better readability) */

  /* Error red - clear danger indication */
  --color-error: oklch(0.51 0.22 15);
  /* Strong error red */
  --color-error-content: oklch(97% 0.02 15);
  /* Nearly white for error text */

  /* ===== COMPONENT STYLING VARIABLES ===== */
  /* Slightly rounded corners for modern but not overly playful look */
  --radius-box: 0.25rem;
  /* Cards, containers */
  --radius-field: 0.15rem;
  /* Input fields, form elements */
  --radius-selector: 0.15rem;
  /* Buttons, selectors */

  /* Border and spacing for clean, structured layout */
  --size-field: 0.25rem;
  /* Field border width */
  --size-selector: 0.25rem;
  /* Selector border width */
  --border: 1px;
  /* Standard border width */

  /* Optional: Depth and visual effects */
  --depth: 2;
  /* Shadow depth multiplier */
  --noise: 0;
  /* Texture noise (disabled for clean look) */

  /* ===== CUSTOM THEMED COLORS ===== */
  --color-teal-themed: oklch(50% 0.15 180);
  /* A balanced teal */
  --color-teal-themed-content: oklch(95% 0.01 180);
  /* Light text on teal */

  --color-pink-themed: oklch(65% 0.18 340);
  /* A soft, vibrant pink */
  --color-pink-themed-content: oklch(20% 0.02 340);
  /* Dark text on pink */

  --color-vermillion-themed: oklch(55% 0.2 30);
  /* A bright, deep vermillion */
  --color-vermillion-themed-content: oklch(97% 0.02 30);
  /* Light text on vermillion */

  --color-brown-themed: oklch(40% 0.1 60);
  /* A rich, earthy brown */
  --color-brown-themed-content: oklch(90% 0.02 60);
  /* Light text on brown */

  --color-lime-themed: oklch(70% 0.25 110);
  /* A fresh, bright lime green */
  --color-lime-themed-content: oklch(25% 0.05 110);
  /* Dark text on lime */

  --color-indigo-themed: oklch(40% 0.15 270);
  /* A deep, calm indigo */
  --color-indigo-themed-content: oklch(95% 0.02 270);
  /* Light text on indigo */

  --color-gold-themed: oklch(75% 0.15 85);
  /* A classic, warm gold */
  --color-gold-themed-content: oklch(20% 0.05 85);
  /* Dark text on gold */

  --color-cyan-themed: oklch(60% 0.2 200);
  /* A clear, vibrant cyan */
  --color-cyan-themed-content: oklch(90% 0.01 200);
  /* Light text on cyan */

  --color-olive-themed: oklch(50% 0.1 100);
  /* A muted, sophisticated olive */
  --color-olive-themed-content: oklch(95% 0.01 100);
  /* Light text on olive */

  --color-lavender-themed: oklch(75% 0.1 300);
  /* A soft, gentle lavender */
  --color-lavender-themed-content: oklch(20% 0.02 300);
  /* Dark text on lavender */
}

[data-theme="reinforced-contrast"] {
  color-scheme: light;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(100% 0 0);
  /* Pure white background */
  --color-base-200: oklch(98% 0.001 240);
  /* Very light gray */
  --color-base-300: oklch(92% 0.002 240);
  /* Light gray for borders */
  --color-base-content: oklch(10% 0.01 240);
  /* Nearly black text */

  /* ===== PRIMARY COLORS ===== */
  --color-primary: oklch(28% 0.2 275);
  /* Deep vibrant purple */
  --color-primary-content: oklch(99% 0.01 275);
  /* Nearly white */

  /* ===== SECONDARY COLORS ===== */
  --color-secondary: oklch(30% 0.25 340);
  /* Deep vibrant magenta */
  --color-secondary-content: oklch(99% 0.01 340);
  /* Nearly white */

  /* ===== ACCENT COLORS ===== */
  --color-accent: oklch(35% 0.18 80);
  /* Deep vibrant gold */
  --color-accent-content: oklch(99% 0.01 80);
  /* Nearly white */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(15% 0.01 240);
  /* Very dark gray */
  --color-neutral-content: oklch(99% 0.01 240);
  /* Nearly white */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(32% 0.25 240);
  /* Deep vibrant blue */
  --color-info-content: oklch(99% 0.01 240);
  /* Nearly white */

  --color-success: oklch(28% 0.22 145);
  /* Deep vibrant green */
  --color-success-content: oklch(99% 0.01 145);
  /* Nearly white */

  --color-warning: oklch(38% 0.2 65);
  /* Deep vibrant orange */
  --color-warning-content: oklch(99% 0.01 65);
  /* Nearly white */

  --color-error: oklch(35% 0.28 15);
  /* Deep vibrant red */
  --color-error-content: oklch(99% 0.01 15);
  /* Nearly white */

  /* ===== COMPONENT STYLING VARIABLES ===== */
  --radius-box: 0;
  /* No rounding */
  --radius-field: 0;
  /* No rounding */
  --radius-selector: 0;
  /* No rounding */
  --size-field: 0.25rem;
  /* Field border width */
  --size-selector: 0.25rem;
  /* Selector border width */
  --border: 1px;
  /* Standard border width */
  --depth: 2;
  /* Shadow depth multiplier */
  --noise: 0;
  /* Texture noise disabled */
}

[data-theme="inversed-contrast"] {
  color-scheme: dark;
  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(25% 0.15 264);
  /* Navy blue #000080 */
  --color-base-200: oklch(32% 0.18 250);
  /* Dark navy blue */
  --color-base-300: oklch(28% 0.18 245);
  /* Very dark navy blue */
  --color-base-content: oklch(97% 0.2 100);
  /* Bright yellow #FFFF00 */
  /* ===== PRIMARY COLORS ===== */
  --color-primary: oklch(97% 0.2 100);
  /* Bright yellow #FFFF00 */
  --color-primary-content: oklch(25% 0.15 264);
  /* Navy blue text */
  /* ===== SECONDARY COLORS ===== */
  --color-secondary: oklch(98% 0.35 330);
  /* Ultra bright magenta/pink */
  --color-secondary-content: oklch(25% 0.15 264);
  /* Navy blue text */
  /* ===== ACCENT COLORS ===== */
  --color-accent: oklch(98% 0.35 180);
  /* Ultra bright cyan/aqua */
  --color-accent-content: oklch(25% 0.15 264);
  /* Navy blue text */
  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(30% 0.15 264);
  /* Navy gray */
  --color-neutral-content: oklch(97% 0.2 100);
  /* Yellow text */
  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(90% 0.25 240);
  /* Bright blue */
  --color-info-content: oklch(25% 0.15 264);
  /* Navy text */
  --color-success: oklch(90% 0.25 145);
  /* Bright lime green */
  --color-success-content: oklch(25% 0.15 264);
  /* Navy text */
  --color-warning: oklch(95% 0.22 60);
  /* Bright orange */
  --color-warning-content: oklch(25% 0.15 264);
  /* Navy text */
  --color-error: oklch(85% 0.3 25);
  /* Bright red */
  --color-error-content: oklch(25% 0.15 264);
  /* Navy text */
  /* ===== COMPONENT STYLING VARIABLES ===== */
  --radius-box: 0;
  /* No rounding */
  --radius-field: 0;
  /* No rounding */
  --radius-selector: 0;
  /* No rounding */
  --size-field: 0.25rem;
  /* Field border width */
  --size-selector: 0.25rem;
  /* Selector border width */
  --border: 1px;
  /* Standard border width */
  --depth: 2;
  /* Shadow depth multiplier */
  --noise: 0;
  /* Texture noise disabled */
}

[data-theme="night"] {
  color-scheme: dark;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(20% 0.01 240);
  /* Very dark gray with slight blue undertone */
  --color-base-200: oklch(25% 0.01 240);
  /* Slightly lighter dark gray */
  --color-base-300: oklch(30% 0.015 240);
  /* Even lighter for borders */
  --color-base-content: oklch(95% 0.01 240);
  /* Light gray for text on dark backgrounds */

  /* ===== PRIMARY COLORS (PURPLE THEME) ===== */
  --color-primary: oklch(55% 0.18 285);
  /* Rich purple, adjusted for dark theme */
  --color-primary-content: oklch(97% 0.02 285);
  /* Nearly white with purple hint */

  /* ===== SECONDARY COLORS (GOLD THEME) ===== */
  --color-secondary: oklch(70% 0.12 80);
  /* Deeper gold */
  --color-secondary-content: oklch(10% 0.02 80);
  /* Dark text for contrast */

  /* ===== ACCENT COLORS (BLUE THEME) ===== */
  --color-accent: oklch(60% 0.12 240);
  /* Vibrant blue */
  --color-accent-content: oklch(97% 0.02 240);
  /* Nearly white with blue hint */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(25% 0.01 240);
  /* Dark gray for neutral elements */
  --color-neutral-content: oklch(95% 0.01 240);
  /* Light gray for text on neutral backgrounds */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(55% 0.2 220);
  /* Information blue */
  --color-info-content: oklch(97% 0.02 220);
  /* Nearly white for info text */
  --color-success: oklch(58% 0.18 140);
  /* Positive success green */
  --color-success-content: oklch(97% 0.02 140);
  /* Nearly white for success text */
  --color-warning: oklch(68% 0.15 65);
  /* Warm warning orange */
  --color-warning-content: oklch(25% 0.05 65);
  /* Dark text for warning */
  --color-error: oklch(62% 0.22 15);
  /* Strong error red */
  --color-error-content: oklch(97% 0.02 15);
  /* Nearly white for error text */

  /* ===== COMPONENT STYLING VARIABLES ===== */
  --radius-box: 0;
  /* No rounding for cards, containers */
  --radius-field: 0.05rem;
  /* Very minimal rounding for input fields */
  --radius-selector: 0;
  /* No rounding for buttons */
  --size-field: 0.25rem;
  /* Field border width */
  --size-selector: 0.25rem;
  /* Selector border width */
  --border: 1px;
  /* Standard border width */
  --depth: 2;
  /* Shadow depth multiplier */
  --noise: 0;
  /* Texture noise (disabled for clean look) */
}

[data-theme="purple"] {
  color-scheme: dark;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  /* Main background - dark blue from color_theme_bg_web */
  --color-base-100: #1e1b4b;

  /* Slightly elevated background - from background_contrast_1 */
  --color-base-200: #2c2956;

  /* More elevated background for borders - from background_contrast_2 */
  --color-base-300: #3c3a63;

  /* Light text on dark backgrounds - from print_secondary_on_web_bg_color */
  --color-base-content: #a5a4b7;

  /* ===== PRIMARY COLORS (PURPLE THEME) ===== */
  /* Main purple color - from color_theme_bg_pop */
  --color-primary: #7c3aed;

  /* White text on purple - from print_on_pop */
  --color-primary-content: #ffffff;

  /* ===== SECONDARY COLORS ===== */
  /* Darker purple for secondary elements - from background_pop_darken */
  --color-secondary: #6c23eb;

  /* White text on secondary purple */
  --color-secondary-content: #ffffff;

  /* ===== ACCENT COLORS ===== */
  /* Purple accent - from color_theme_accent */
  --color-accent: #7c3aed;

  /* White text on accent purple */
  --color-accent-content: #ffffff;

  /* ===== NEUTRAL COLORS ===== */
  /* Medium contrast background - from background_contrast_3 */
  --color-neutral: #5d5b7e;

  /* Light text on neutral backgrounds */
  --color-neutral-content: #ffffff;

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  /* Information blue - keeping similar to original but with purple tint */
  --color-info: #6366f1;

  /* White text on info background */
  --color-info-content: #ffffff;

  /* Success green - from primitive green values */
  --color-success: #10b981;

  /* White text on success background */
  --color-success-content: #ffffff;

  /* Warning orange - from primitive orange values */
  --color-warning: #f59e0b;

  /* Dark text on warning background for better contrast */
  --color-warning-content: #1f2937;

  /* Error red - from primitive red values */
  --color-error: #ef4444;

  /* White text on error background */
  --color-error-content: #ffffff;

  /* ===== COMPONENT STYLING VARIABLES ===== */
  /* Slightly rounded corners for modern look */
  --radius-box: 8px;

  /* Minimal rounding for input fields */
  --radius-field: 4px;

  /* Minimal rounding for buttons */
  --radius-selector: 4px;

  /* Field padding/sizing - keeping original rem values for proper sizing */
  --size-field: 0.25rem;

  /* Button padding/sizing - keeping original rem values for proper sizing */
  --size-selector: 0.25rem;

  /* Standard border width */
  --border: 1px;

  /* Shadow depth multiplier */
  --depth: 2;

  /* Texture noise disabled for clean look */
  --noise: 0;
}

[data-theme="dark-black"] {
  color-scheme: dark;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  /*--color-base-100: oklch(20% 0.01 240);     Very dark gray with slight blue undertone */
  /*--color-base-200: oklch(25% 0.01 240);     Slightly lighter dark gray */
  /*--color-base-300: oklch(30% 0.015 240);    Even lighter for borders */
  /*--color-base-content: red;  Light gray for text on dark backgrounds */

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(20% 0.01 240);
  /* Very dark gray with slight blue undertone */
  --color-base-200: oklch(25% 0.01 240);
  /* Slightly lighter dark gray */
  --color-base-300: oklch(30% 0.015 240);
  /* Even lighter for borders */
  --color-base-content: oklch(65% 0.25 15);
  /* Readable reddish text */

  --color-green: oklch(65% 0.19 145);

  /* ===== PRIMARY COLORS Very Flashy Green ===== */
  --color-primary: var(--color-green);
  /* Rich purple, adjusted for dark theme */
  --color-primary-content: oklch(97% 0.02 285);
  /* Nearly white with purple hint */

  /* ===== SECONDARY COLORS (GOLD THEME) ===== */
  --color-secondary: oklch(70% 0.12 80);
  /* Deeper gold */
  --color-secondary-content: oklch(10% 0.02 80);
  /* Dark text for contrast */

  /* ===== ACCENT COLORS (BLUE THEME) ===== */
  --color-accent: oklch(60% 0.12 240);
  /* Vibrant blue */
  --color-accent-content: oklch(97% 0.02 240);
  /* Nearly white with blue hint */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(25% 0.01 240);
  /* Dark gray for neutral elements */
  --color-neutral-content: oklch(95% 0.01 240);
  /* Light gray for text on neutral backgrounds */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(55% 0.2 220);
  /* Information blue */
  --color-info-content: oklch(97% 0.02 220);
  /* Nearly white for info text */
  --color-success: oklch(58% 0.18 140);
  /* Positive success green */
  --color-success-content: oklch(97% 0.02 140);
  /* Nearly white for success text */
  --color-warning: oklch(68% 0.15 65);
  /* Warm warning orange */
  --color-warning-content: oklch(25% 0.05 65);
  /* Dark text for warning */
  --color-error: oklch(62% 0.22 15);
  /* Strong error red */
  --color-error-content: oklch(97% 0.02 15);
  /* Nearly white for error text */

  /* ===== COMPONENT STYLING VARIABLES ===== */
  --radius-box: 0;
  /* No rounding for cards, containers */
  --radius-field: 0.05rem;
  /* Very minimal rounding for input fields */
  --radius-selector: 0;
  /* No rounding for buttons */
  --size-field: 0.25rem;
  /* Field border width */
  --size-selector: 0.25rem;
  /* Selector border width */
  --border: 1px;
  /* Standard border width */
  --depth: 2;
  /* Shadow depth multiplier */
  --noise: 0;
  /* Texture noise (disabled for clean look) */
}

/* ===== ADDITIONAL NOTES AND MISSING VARIABLES ===== */
/*
 * This theme includes all standard DaisyUI color variables.
 * 
 * Key design decisions:
 * 1. base-100 (99.5% lightness) - Nearly white for maximum brightness
 * 2. base-200 (97% lightness) - Subtle difference but noticeable for layering
 * 3. base-content (22% lightness) - Strong matte dark for excellent readability
 * 4. All content colors are 97% lightness - Very strong white-ish text
 * 5. Primary/Secondary/Accent are dark enough for WCAG AA accessibility
 * 
 * Color choices:
 * - Primary: Rich purple (285° hue) - Professional and distinctive
 * - Secondary: Strong blue (240° hue) - Trustworthy and corporate
 * - Accent: Emerald green (150° hue) - Fresh and action-oriented
 * 
 * Potential missing variables that some DaisyUI versions might use:
 * --rounded-box, --rounded-btn, --rounded-badge
 * --animation-btn, --animation-input
 * --btn-text-case, --btn-focus-scale
 * --border-btn, --tab-border, --tab-radius
 * 
 * If you need any of these, they can be added based on your specific needs.
 */

/**************** Custom DaisyUI Theme - Zelie (DaisyUI v5 format) ****************/
[data-theme="zelie"] {
  color-scheme: light;

  /* Base colors (backgrounds) */
  --color-base-100: oklch(100% 0 0);
  /* Pure white */
  --color-base-200: oklch(97% 0.02 220);
  /* Very light gray */
  --color-base-300: oklch(91% 0.04 220);
  /* Light gray */
  --color-base-content: oklch(18% 0.05 220);
  /* Dark text */

  /* Primary colors */
  --color-primary: oklch(60% 0.25 219);
  /* Beautiful blue */
  --color-primary-content: oklch(100% 0 0);
  /* White text on primary */

  /* Secondary colors */
  --color-secondary: oklch(36% 0.2 142);
  /* Forest green */
  --color-secondary-content: oklch(100% 0 0);
  /* White text on secondary */

  /* Accent colors */
  --color-accent: oklch(70% 0.25 328);
  /* Pink accent */
  --color-accent-content: oklch(15% 0.05 328);
  /* Dark text on accent */

  /* Neutral colors */
  --color-neutral: oklch(18% 0.05 220);
  /* Dark neutral */
  --color-neutral-content: oklch(100% 0 0);
  /* White text on neutral */

  /* State colors */
  --color-info: oklch(60% 0.25 198);
  /* Info blue */
  --color-info-content: oklch(100% 0 0);
  /* White text on info */

  --color-success: oklch(52% 0.2 158);
  /* Success green */
  --color-success-content: oklch(100% 0 0);
  /* White text on success */

  --color-warning: oklch(60% 0.3 65);
  /* Strong yellow-amber warning color */
  --color-warning-content: oklch(15% 0.05 65);
  /* Dark text on warning */

  --color-error: oklch(71% 0.25 0);
  /* Error red */
  --color-error-content: oklch(100% 0 0);
  /* White text on error */

  /* Component specific variables */
  --radius-box: 0.75rem;
  --radius-field: 0.5rem;
  --radius-selector: 1rem;
  --size-field: 0.25rem;
  --size-selector: 0.25rem;
  --border: 1px;
}

/**************** Custom DaisyUI Theme - Zelie Dark (DaisyUI v5 format) ****************/
[data-theme="zelie-dark"] {
  color-scheme: dark;

  /* Base colors (backgrounds) */
  --color-base-100: oklch(18% 0.05 220);
  /* Dark background */
  --color-base-200: oklch(15% 0.05 220);
  /* Darker background */
  --color-base-300: oklch(12% 0.05 220);
  /* Darkest background */
  --color-base-content: oklch(91% 0.04 220);
  /* Light text */

  /* Primary colors */
  --color-primary: oklch(70% 0.25 219);
  /* Lighter blue for dark mode */
  --color-primary-content: oklch(15% 0.05 219);
  /* Dark text on primary */

  /* Secondary colors */
  --color-secondary: oklch(46% 0.2 142);
  /* Lighter forest green */
  --color-secondary-content: oklch(15% 0.05 142);
  /* Dark text on secondary */

  /* Accent colors */
  --color-accent: oklch(80% 0.25 328);
  /* Lighter pink accent */
  --color-accent-content: oklch(15% 0.05 328);
  /* Dark text on accent */

  /* Neutral colors */
  --color-neutral: oklch(85% 0.04 220);
  /* Light neutral */
  --color-neutral-content: oklch(18% 0.05 220);
  /* Dark text on neutral */

  /* State colors */
  --color-info: oklch(70% 0.25 198);
  /* Lighter info blue */
  --color-info-content: oklch(15% 0.05 198);
  /* Dark text on info */

  --color-success: oklch(62% 0.2 158);
  /* Lighter success green */
  --color-success-content: oklch(15% 0.05 158);
  /* Dark text on success */

  /* Adjusted warning color to be more yellow and less reddish */
  --color-warning: oklch(60% 0.15 65);
  /* Strong yellow-amber warning color */
  --color-warning-content: oklch(15% 0.05 65);
  /* Dark text on warning */

  --color-error: oklch(81% 0.25 0);
  /* Lighter error red */
  --color-error-content: oklch(15% 0.05 0);
  /* Dark text on error */

  /* Component specific variables */
  --radius-box: 0.75rem;
  --radius-field: 0.5rem;
  --radius-selector: 1rem;
  --size-field: 0.25rem;
  --size-selector: 0.25rem;
  --border: 1px;
}

/**************** Custom DaisyUI Theme - Light Opt (DaisyUI v5 format) ****************/

[data-theme="light-opt"] {
  color-scheme: light;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(99% 0.002 120);
  /* Nearly pure white */
  --color-base-200: oklch(96% 0.005 120);
  /* Very light warm gray */
  --color-base-300: oklch(90% 0.01 155);
  /* Light warm gray */
  --color-base-content: oklch(22% 0.015 240);
  /* Deep charcoal for text */

  /* ===== PRIMARY COLORS (PURPLE THEME) ===== */
  --color-primary: oklch(60% 0.22 300);
  /* Vibrant purple */
  --color-primary-content: oklch(98% 0.02 300);
  /* Near-white with purple hint */

  /* ===== SECONDARY COLORS (TEAL THEME) ===== */
  --color-secondary: oklch(55% 0.18 190);
  /* Deep teal */
  --color-secondary-content: oklch(98% 0.02 190);
  /* Near-white with teal hint */

  /* ===== ACCENT COLORS (GOLD THEME) ===== */
  --color-accent: oklch(75% 0.15 80);
  /* Warm gold */
  --color-accent-content: oklch(15% 0.05 80);
  /* Dark text for gold */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(25% 0.01 240);
  /* Dark gray for neutral elements */
  --color-neutral-content: oklch(95% 0.01 240);
  /* Light gray for text on neutral */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(65% 0.2 300);
  /* Purple for info (aligned with primary) */
  --color-info-content: oklch(98% 0.02 300);
  /* Near-white for info text */

  --color-success: oklch(65% 0.18 140);
  /* Soft green for success */
  --color-success-content: oklch(98% 0.02 140);
  /* Near-white for success text */

  --color-warning: oklch(65% 0.12 60);
  /* Soft yellow for warning (less aggressive) */
  --color-warning-content: oklch(25% 0.05 60);
  /* Dark text for warning */

  --color-error: oklch(65% 0.2 20);
  /* Soft red for error (less aggressive) */
  --color-error-content: oklch(98% 0.02 20);
  /* Near-white for error text */

  /* ===== COMPONENT STYLING ===== */
  --radius-box: 0.5rem;
  --radius-field: 0.25rem;
  --radius-selector: 0.25rem;
  --size-field: 0.25rem;
  --size-selector: 0.25rem;
  --border: 1px;
  --depth: 2;
  --noise: 0;
}

/**************** Custom DaisyUI Theme - Dark Opt (DaisyUI v5 format) ****************/

[data-theme="dark-opt"] {
  color-scheme: dark;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(15% 0.015 240);
  /* Very dark background */
  --color-base-200: oklch(18% 0.015 240);
  /* Slightly lighter dark */
  --color-base-300: oklch(25% 0.02 240);
  /* Lighter for borders */
  --color-base-content: oklch(95% 0.01 240);
  /* Very light text */

  /* ===== PRIMARY COLORS (BRIGHT PURPLE) ===== */
  --color-primary: oklch(75% 0.2 285);
  /* Bright purple for readability */
  --color-primary-content: oklch(15% 0.02 285);
  /* Dark text on bright bg */

  /* ===== SECONDARY COLORS (BRIGHT PINK) ===== */
  --color-secondary: oklch(72% 0.25 340);
  /* Bright pink/magenta */
  --color-secondary-content: oklch(15% 0.02 340);
  /* Dark text on bright bg */

  /* ===== ACCENT COLORS (BRIGHT GOLD) ===== */
  --color-accent: oklch(78% 0.15 80);
  /* Bright gold */
  --color-accent-content: oklch(15% 0.02 80);
  /* Dark text on bright bg */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(22% 0.015 240);
  /* Dark neutral */
  --color-neutral-content: oklch(95% 0.01 240);
  /* Light text on neutral */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(70% 0.25 240);
  /* Bright blue */
  --color-info-content: oklch(15% 0.02 240);
  /* Dark text on bright bg */

  --color-success: oklch(75% 0.22 145);
  /* Bright green */
  --color-success-content: oklch(15% 0.02 145);
  /* Dark text on bright bg */

  --color-warning: oklch(80% 0.2 70);
  /* Bright orange/yellow */
  --color-warning-content: oklch(15% 0.02 70);
  /* Dark text on bright bg */

  --color-error: oklch(72% 0.25 15);
  /* Bright red */
  --color-error-content: oklch(15% 0.02 15);
  /* Dark text on bright bg */

  /* ===== COMPONENT STYLING VARIABLES ===== */
  --radius-box: 0.25rem;
  /* Cards, containers */
  --radius-field: 0.15rem;
  /* Input fields */
  --radius-selector: 0.15rem;
  /* Buttons */
  --size-field: 0.25rem;
  /* Field border width */
  --size-selector: 0.25rem;
  /* Selector border width */
  --border: 1px;
  /* Standard border width */
  --depth: 2;
  /* Shadow depth multiplier */
  --noise: 0;
  /* Texture noise disabled */
}

/* NOT USED */

/* Not used: palette type autumn nice but contrast not good enough */

[data-theme="light-readable"] {
  color-scheme: light;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(99% 0.002 190);
  /* Near-white with slight cool tint */
  --color-base-200: oklch(96% 0.005 190);
  /* Very light gray for cards/modals */
  --color-base-300: oklch(90% 0.01 190);
  /* Light gray for borders/dividers */
  --color-base-content: oklch(20% 0.02 220);
  /* Dark charcoal for text, high contrast */

  /* ===== PRIMARY COLORS (TEAL THEME) ===== */
  --color-primary: oklch(55% 0.18 190);
  /* Rich teal, accessible */
  --color-primary-content: oklch(97% 0.01 190);
  /* Near-white text for contrast */

  /* ===== SECONDARY COLORS (CORAL THEME) ===== */
  --color-secondary: oklch(65% 0.15 20);
  /* Warm coral */
  --color-secondary-content: oklch(97% 0.01 20);
  /* Near-white text */

  /* ===== ACCENT COLORS (GOLD THEME) ===== */
  --color-accent: oklch(75% 0.12 80);
  /* Soft gold for highlights */
  --color-accent-content: oklch(20% 0.02 80);
  /* Dark text for contrast */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(30% 0.01 220);
  /* Medium gray for neutral elements */
  --color-neutral-content: oklch(95% 0.01 220);
  /* Light gray text on neutral */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(60% 0.2 220);
  /* Info blue */
  --color-info-content: oklch(97% 0.01 220);
  /* Near-white text */

  --color-success: oklch(60% 0.18 150);
  /* Success green */
  --color-success-content: oklch(97% 0.01 150);
  /* Near-white text */

  --color-warning: oklch(65% 0.25 70);
  /* Yellow-amber warning */
  --color-warning-content: oklch(20% 0.02 70);
  /* Dark text for contrast */

  --color-error: oklch(65% 0.22 15);
  /* Error red */
  --color-error-content: oklch(97% 0.01 15);
  /* Near-white text */

  /* ===== COMPONENT STYLING VARIABLES ===== */
  --radius-box: 0.5rem;
  /* Moderate rounding for cards */
  --radius-field: 0.3rem;
  /* Slightly rounded inputs */
  --radius-selector: 0.3rem;
  /* Rounded buttons */
  --size-field: 0.25rem;
  /* Field border width */
  --size-selector: 0.25rem;
  /* Selector border width */
  --border: 1px;
  /* Standard border */
  --depth: 2;
  /* Shadow depth */
  --noise: 0;
  /* No texture noise */
}

/**************** Custom DaisyUI Theme - Studiolo (DaisyUI v5 format) ****************/
[data-theme="studiolo"] {
  color-scheme: light;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(98.5% 0.005 280);
  /* Very faint lavender white */
  --color-base-200: oklch(95.5% 0.01 270);
  /* Light cool gray with purple hint */
  --color-base-300: oklch(89% 0.015 265);
  /* Soft border gray, slightly violet */
  --color-base-content: oklch(20% 0.02 270);
  /* Deep ink, near-black with blue-violet cast */

  /* ===== PRIMARY COLORS (DARK PURPLE) ===== */
  --color-primary: oklch(38% 0.2 290);
  /* Dark vibrant purple */
  --color-primary-content: oklch(97% 0.01 290);
  /* Near-white on purple */

  /* ===== SECONDARY COLORS (DARK BLUE) ===== */
  --color-secondary: oklch(40% 0.18 250);
  /* Deep navy blue */
  --color-secondary-content: oklch(97% 0.01 250);
  /* Near-white on blue */

  /* ===== ACCENT COLORS (ORANGE) ===== */
  --color-accent: oklch(68% 0.19 55);
  /* Warm burnt orange */
  --color-accent-content: oklch(18% 0.03 55);
  /* Dark text on orange */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(24% 0.015 270);
  /* Dark slate */
  --color-neutral-content: oklch(96% 0.005 270);
  /* Light text on neutral */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(52% 0.2 250);
  /* Strong informational blue */
  --color-info-content: oklch(97% 0.01 250);

  --color-success: oklch(52% 0.17 155);
  /* Balanced green */
  --color-success-content: oklch(97% 0.01 155);

  --color-warning: oklch(72% 0.18 70);
  /* Amber, readable on light */
  --color-warning-content: oklch(20% 0.03 70);
  /* Dark text on warning */

  --color-error: oklch(55% 0.22 20);
  /* Clear red */
  --color-error-content: oklch(97% 0.01 20);

  /* ===== COMPONENT STYLING VARIABLES ===== */
  --radius-box: 0.6rem;
  /* Medium rounding for cards */
  --radius-field: 0.4rem;
  /* Medium rounding for buttons/inputs */
  --radius-selector: 0.2rem;
  /* Very small for selectors/toggles */
  --size-field: 0.25rem;
  --size-selector: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/**************** Custom DaisyUI Theme - Dark RD (DaisyUI v5 format) ****************/

[data-theme="dark-readable"] {
  color-scheme: dark;

  /* ===== BASE COLORS (BACKGROUNDS) ===== */
  --color-base-100: oklch(18% 0.01 220);
  /* Dark gray with cool undertone */
  --color-base-200: oklch(22% 0.01 220);
  /* Slightly lighter dark gray */
  --color-base-300: oklch(28% 0.015 220);
  /* Lighter gray for borders */
  --color-base-content: oklch(95% 0.01 220);
  /* Light gray text, high contrast */

  /* ===== PRIMARY COLORS (TEAL THEME) ===== */
  --color-primary: oklch(55% 0.18 190);
  /* Rich teal, same as light theme */
  --color-primary-content: oklch(97% 0.01 190);
  /* Near-white text */

  /* ===== SECONDARY COLORS (CORAL THEME) ===== */
  --color-secondary: oklch(65% 0.15 20);
  /* Warm coral, same as light theme */
  --color-secondary-content: oklch(97% 0.01 20);
  /* Near-white text */

  /* ===== ACCENT COLORS (GOLD THEME) ===== */
  --color-accent: oklch(75% 0.12 80);
  /* Soft gold, same as light theme */
  --color-accent-content: oklch(20% 0.02 80);
  /* Dark text for contrast */

  /* ===== NEUTRAL COLORS ===== */
  --color-neutral: oklch(25% 0.01 220);
  /* Dark gray for neutral elements */
  --color-neutral-content: oklch(95% 0.01 220);
  /* Light gray text on neutral */

  /* ===== STATE COLORS (SEMANTIC FEEDBACK) ===== */
  --color-info: oklch(60% 0.2 220);
  /* Info blue */
  --color-info-content: oklch(97% 0.01 220);
  /* Near-white text */

  --color-success: oklch(60% 0.18 150);
  /* Success green */
  --color-success-content: oklch(97% 0.01 150);
  /* Near-white text */

  --color-warning: oklch(65% 0.25 70);
  /* Yellow-amber warning */
  --color-warning-content: oklch(20% 0.02 70);
  /* Dark text for contrast */

  --color-error: oklch(65% 0.22 15);
  /* Error red */
  --color-error-content: oklch(97% 0.01 15);
  /* Near-white text */

  /* ===== COMPONENT STYLING VARIABLES ===== */
  --radius-box: 0.5rem;
  /* Moderate rounding for cards */
  --radius-field: 0.3rem;
  /* Slightly rounded inputs */
  --radius-selector: 0.3rem;
  /* Rounded buttons */
  --size-field: 0.25rem;
  /* Field border width */
  --size-selector: 0.25rem;
  /* Selector border width */
  --border: 1px;
  /* Standard border */
  --depth: 2;
  /* Shadow depth */
  --noise: 0;
  /* No texture noise */
}

/* ═══════════════════════════════════════════════════════════
   SVG stroke & fill utilities (for inline SVGs)
   ═══════════════════════════════════════════════════════════ */

.stroke-primary { stroke: var(--color-primary); }
.fill-primary { fill: var(--color-primary); }
.stroke-primary-soft { stroke: var(--color-primary-soft); }
.fill-primary-soft { fill: var(--color-primary-soft); }
.stroke-primary-content { stroke: var(--color-primary-content); }
.fill-primary-content { fill: var(--color-primary-content); }

.stroke-secondary { stroke: var(--color-secondary); }
.fill-secondary { fill: var(--color-secondary); }
.stroke-secondary-soft { stroke: var(--color-secondary-soft); }
.fill-secondary-soft { fill: var(--color-secondary-soft); }
.stroke-secondary-content { stroke: var(--color-secondary-content); }
.fill-secondary-content { fill: var(--color-secondary-content); }

.stroke-accent { stroke: var(--color-accent); }
.fill-accent { fill: var(--color-accent); }
.stroke-accent-soft { stroke: var(--color-accent-soft); }
.fill-accent-soft { fill: var(--color-accent-soft); }
.stroke-accent-content { stroke: var(--color-accent-content); }
.fill-accent-content { fill: var(--color-accent-content); }

.stroke-base-100 { stroke: var(--color-base-100); }
.fill-base-100 { fill: var(--color-base-100); }
.stroke-base-200 { stroke: var(--color-base-200); }
.fill-base-200 { fill: var(--color-base-200); }
.stroke-base-300 { stroke: var(--color-base-300); }
.fill-base-300 { fill: var(--color-base-300); }
.stroke-base-content { stroke: var(--color-base-content); }
.fill-base-content { fill: var(--color-base-content); }

.stroke-info { stroke: var(--color-info); }
.fill-info { fill: var(--color-info); }
.stroke-info-soft { stroke: var(--color-info-soft); }
.fill-info-soft { fill: var(--color-info-soft); }

.stroke-success { stroke: var(--color-success); }
.fill-success { fill: var(--color-success); }
.stroke-success-soft { stroke: var(--color-success-soft); }
.fill-success-soft { fill: var(--color-success-soft); }

.stroke-warning { stroke: var(--color-warning); }
.fill-warning { fill: var(--color-warning); }
.stroke-warning-soft { stroke: var(--color-warning-soft); }
.fill-warning-soft { fill: var(--color-warning-soft); }

.stroke-error { stroke: var(--color-error); }
.fill-error { fill: var(--color-error); }
.stroke-error-soft { stroke: var(--color-error-soft); }
.fill-error-soft { fill: var(--color-error-soft); }

.fill-none { fill: none; }