/**************** 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)
  );

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


[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 - 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 */
}