/* assets\front\css\colors.css */

/* Base theme attributes */
:root {
    --success-color: #4bb543;
    --warning-color: #ffd500;
    --transition-speed: 0.3s;
    --primary-rgb: var(--primary-500);
    --color-text-on-primary: var(--text-50);
}
[data-accent-color="a-c-c1"][data-bs-theme="light"] {
    /* Main colors */
    --text: #313b49;
    --text-second: #707987;
    --text-third: #98a4b2;
    --background: #f7f7fc;
    --background-secondary: #eeeef9;
    --primary: #d792d8;
    --accent: #6169ff;

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);

    /* Background variations */
    --background-lightest: white;
    --background-lighter: color-mix(in srgb, var(--background) 75%, white);
    --background-darker: color-mix(in srgb, var(--background) 75%, black);
    --background-darkest: color-mix(in srgb, var(--background) 50%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 50%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 25%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 25%, black);

    /* Add special border colors for light mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, black); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, black);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, black);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, black); /* Emphasised border */
}

[data-accent-color="a-c-c1"][data-bs-theme="dark"] {
    /* Main colors */
    --text: #c4cad4;
    --text-second: #707987;
    --text-third: #545e6f;    
    --background: #1e2734;
    --background-secondary: #121b28;
    --primary: #d792d8;
    --accent: #6169ff;


    /* Background variations */
    --background-lightest: color-mix(in srgb, var(--background) 25%, white);
    --background-lighter: color-mix(in srgb, var(--background) 50%, white);
    --background-darker: color-mix(in srgb, var(--background) 50%, black);
    --background-darkest: color-mix(in srgb, var(--background) 75%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 90%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 75%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 75%, black);

    /* Add special border colors for dark mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, white); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, white);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, white);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, white); /* Emphasised border */
}
/* a-c-c2 Light Theme */
[data-accent-color="a-c-c2"][data-bs-theme="light"] {
    /* Main colors */
    --text: #2b3845;
    --text-second: #5d7185;
    --text-third: #8fa3b7;
    --background: #f8fbfd;
    --background-secondary: #f0f7fc;
    --primary: #0088cc; /* Deeper blue as primary */
    --accent: #01c0ff;  /* Requested accent color */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: white;
    --background-lighter: color-mix(in srgb, var(--background) 75%, white);
    --background-darker: color-mix(in srgb, var(--background) 75%, black);
    --background-darkest: color-mix(in srgb, var(--background) 50%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 50%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 25%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 25%, black);

    /* Add special border colors for light mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, black); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, black);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, black);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, black); /* Emphasised border */
}

/* a-c-c2 Dark Theme */
[data-accent-color="a-c-c2"][data-bs-theme="dark"] {
    /* Main colors */
    --text: #e0f4ff;
    --text-second: #a3d5eb;
    --text-third: #6798b4;    
    --background: #1a2632;
    --background-secondary: #111c26;
    --primary: #0088cc; /* Deeper blue as primary */
    --accent: #01c0ff;  /* Requested accent color */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: color-mix(in srgb, var(--background) 25%, white);
    --background-lighter: color-mix(in srgb, var(--background) 50%, white);
    --background-darker: color-mix(in srgb, var(--background) 50%, black);
    --background-darkest: color-mix(in srgb, var(--background) 75%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 90%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 75%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 75%, black);

    /* Add special border colors for dark mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, white); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, white);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, white);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, white); /* Emphasised border */
}
/* a-c-c3 Light Theme */
[data-accent-color="a-c-c3"][data-bs-theme="light"] {
    /* Main colors */
    --text: #1a2433;          /* Deeper, richer text color */
    --text-second: #4a5c70;   /* Balanced mid-tone */
    --text-third: #798799;    /* Refined gray with slight blue undertone */
    --background: #ffffff;    /* Clean white base */
    --background-secondary: #f8fcfa;  /* Subtle mint tint */
    --primary: #00855f;       /* Modern emerald primary */
    --accent: #10b981;        /* Fresh, vibrant green accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: #ffffff;
    --background-lighter: color-mix(in srgb, var(--background) 75%, white);
    --background-darker: color-mix(in srgb, var(--background) 75%, black);
    --background-darkest: color-mix(in srgb, var(--background) 50%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 50%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 25%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 25%, black);

    /* Add special border colors for light mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, black); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, black);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, black);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, black); /* Emphasised border */

    /* Special interaction states */
    --hover-overlay: rgba(16, 185, 129, 0.04);  /* Subtle green hover */
    --active-overlay: rgba(16, 185, 129, 0.08); /* Slightly stronger for active */
}

/* a-c-c3 Dark Theme */
[data-accent-color="a-c-c3"][data-bs-theme="dark"] {
    /* Main colors */
    --text: #ebf4f1;          /* Crisp, slightly green-tinted white */
    --text-second: #a8bfb7;   /* Sophisticated mid-tone */
    --text-third: #7a8f88;    /* Deep green-gray */
    --background: #1a2827;    /* Modern forest dark */
    --background-secondary: #141f1e;  /* Deeper green-tinted dark */
    --primary: #00855f;       /* Modern emerald primary */
    --accent: #10b981;        /* Fresh, vibrant green accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: color-mix(in srgb, var(--background) 25%, white);
    --background-lighter: color-mix(in srgb, var(--background) 50%, white);
    --background-darker: color-mix(in srgb, var(--background) 50%, black);
    --background-darkest: color-mix(in srgb, var(--background) 75%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 90%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 75%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 75%, black);

    /* Add special border colors for dark mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, white); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, white);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, white);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, white); /* Emphasised border */

    /* Special interaction states */
    --hover-overlay: rgba(16, 185, 129, 0.08);  /* Subtle green hover */
    --active-overlay: rgba(16, 185, 129, 0.15); /* Slightly stronger for active */
}
/* a-c-c4 Light Theme */
[data-accent-color="a-c-c4"][data-bs-theme="light"] {
    /* Main colors */
    --text: #2d2832;
    --text-second: #635d69;
    --text-third: #8f8a94;
    --background: #f8fafd;      /* Cool light blue-tinted white */
    --background-secondary: #f4f6fc;  /* Slightly more saturated cool background */
    --primary: #d63030; /* Deeper red as primary */
    --accent: #fc4349;  /* Requested accent color */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: white;
    --background-lighter: color-mix(in srgb, var(--background) 75%, white);
    --background-darker: color-mix(in srgb, var(--background) 75%, black);
    --background-darkest: color-mix(in srgb, var(--background) 50%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 50%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 25%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 25%, black);

    /* Add special border colors for light mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, black); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, black);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, black);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, black); /* Emphasised border */
}

/* a-c-c4 Dark Theme */
[data-accent-color="a-c-c4"][data-bs-theme="dark"] {
    /* Main colors */
    --text: #f4f6f9;
    --text-second: #b4bac4;
    --text-third: #808791;    
    --background: #1a2028;    /* Cool dark blue-gray */
    --background-secondary: #141820;  /* Darker blue-tinted background */
    --primary: #d63030; /* Deeper red as primary */
    --accent: #fc4349;  /* Requested accent color */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: color-mix(in srgb, var(--background) 25%, white);
    --background-lighter: color-mix(in srgb, var(--background) 50%, white);
    --background-darker: color-mix(in srgb, var(--background) 50%, black);
    --background-darkest: color-mix(in srgb, var(--background) 75%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 90%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 75%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 75%, black);

    /* Add special border colors for dark mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, white); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, white);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, white);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, white); /* Emphasised border */
}
/* a-c-c5 Light Theme */
[data-accent-color="a-c-c5"][data-bs-theme="light"] {
    /* Main colors */
    --text: #2b303a;
    --text-second: #596173;
    --text-third: #8792a8;
    --background: #f9fbfd;      /* Cool light blue-white for contrast */
    --background-secondary: #f5f7fc;  /* Subtle blue-tinted secondary */
    --primary: #e47911;        /* Deeper orange as primary */
    --accent: #ff9900;         /* Amazon orange accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: white;
    --background-lighter: color-mix(in srgb, var(--background) 75%, white);
    --background-darker: color-mix(in srgb, var(--background) 75%, black);
    --background-darkest: color-mix(in srgb, var(--background) 50%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 50%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 25%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 25%, black);

    /* Add special border colors for light mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, black); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, black);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, black);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, black); /* Emphasised border */
}

/* a-c-c5 Dark Theme */
[data-accent-color="a-c-c5"][data-bs-theme="dark"] {
    /* Main colors */
    --text: #f5f7fa;
    --text-second: #b8bfcc;
    --text-third: #8792a8;    
    --background: #1a1f2b;    /* Deep blue-tinted dark background */
    --background-secondary: #13171f;  /* Darker blue-tinted background */
    --primary: #e47911;        /* Deeper orange as primary */
    --accent: #ff9900;         /* Amazon orange accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: color-mix(in srgb, var(--background) 25%, white);
    --background-lighter: color-mix(in srgb, var(--background) 50%, white);
    --background-darker: color-mix(in srgb, var(--background) 50%, black);
    --background-darkest: color-mix(in srgb, var(--background) 75%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 90%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 75%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 75%, black);

    /* Add special border colors for dark mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, white); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, white);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, white);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, white); /* Emphasised border */
}
/* a-c-c6 Light Theme */
[data-accent-color="a-c-c6"][data-bs-theme="light"] {
    /* Main colors */
    --text: #2b2d3a;          /* Deep neutral gray with slight coolness */
    --text-second: #575b6e;   /* Balanced mid-tone */
    --text-third: #8589a0;    /* Soft cool gray */
    --background: #fafbfd;    /* Clean, cool white */
    --background-secondary: #f5f7fc;  /* Subtle cool secondary */
    --primary: #7c4dff;       /* Deep purple primary */
    --accent: #ff6af6;        /* Vibrant pink accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: white;
    --background-lighter: color-mix(in srgb, var(--background) 75%, white);
    --background-darker: color-mix(in srgb, var(--background) 75%, black);
    --background-darkest: color-mix(in srgb, var(--background) 50%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 50%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 25%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 25%, black);

    /* Add special border colors for light mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, black); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, black);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, black);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, black); /* Emphasised border */
}

/* a-c-c6 Dark Theme */
[data-accent-color="a-c-c6"][data-bs-theme="dark"] {
    /* Main colors */
    --text: #f4f6fc;          /* Clean white with slight coolness */
    --text-second: #b4b8c9;   /* Neutral mid-tone */
    --text-third: #8085a0;    /* Deep cool gray */
    --background: #17192a;    /* Deep indigo-based dark */
    --background-secondary: #12141f;  /* Darker indigo background */
    --primary: #7c4dff;       /* Deep purple primary */
    --accent: #ff6af6;        /* Vibrant pink accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: color-mix(in srgb, var(--background) 25%, white);
    --background-lighter: color-mix(in srgb, var(--background) 50%, white);
    --background-darker: color-mix(in srgb, var(--background) 50%, black);
    --background-darkest: color-mix(in srgb, var(--background) 75%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 90%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 75%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 75%, black);

    /* Add special border colors for dark mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, white); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, white);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, white);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, white); /* Emphasised border */
}
/* a-c-c8 Light Theme */
[data-accent-color="a-c-c7"][data-bs-theme="light"] {
    /* Main colors */
    --text: #283240;          /* Deep blue-gray */
    --text-second: #526273;   /* Balanced mid-tone */
    --text-third: #7f8e9d;    /* Soft bluish gray */
    --background: #f8fcfb;    /* Very subtle turquoise tint */
    --background-secondary: #f3faf8;  /* Slightly deeper turquoise tint */
    --primary: #4fd6bc;       /* Turquoise primary */
    --accent: #ff1970;        /* Vibrant pink accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: white;
    --background-lighter: color-mix(in srgb, var(--background) 75%, white);
    --background-darker: color-mix(in srgb, var(--background) 75%, black);
    --background-darkest: color-mix(in srgb, var(--background) 50%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 50%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 25%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 25%, black);

    /* Add special border colors for light mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, black); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, black);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, black);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, black); /* Emphasised border */
}

/* a-c-c8 Dark Theme */
[data-accent-color="a-c-c7"][data-bs-theme="dark"] {
    /* Main colors */
    --text: #e8f4f1;          /* Turquoise-tinted white */
    --text-second: #a6c5be;   /* Muted turquoise-gray */
    --text-third: #729892;    /* Deeper turquoise-gray */
    --background: #1a2726;    /* Deep turquoise-tinted dark */
    --background-secondary: #151f1e;  /* Darker turquoise-tinted */
    --primary: #4fd6bc;       /* Turquoise primary */
    --accent: #ff1970;        /* Vibrant pink accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: color-mix(in srgb, var(--background) 25%, white);
    --background-lighter: color-mix(in srgb, var(--background) 50%, white);
    --background-darker: color-mix(in srgb, var(--background) 50%, black);
    --background-darkest: color-mix(in srgb, var(--background) 75%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 90%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 75%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 75%, black);

    /* Add special border colors for dark mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, white); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, white);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, white);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, white); /* Emphasised border */
}
/* a-c-c8 Light Theme */
[data-accent-color="a-c-c8"][data-bs-theme="light"] {
    /* Main colors */
    --text: #1f2937;          /* Deep cool gray */
    --text-second: #4b5563;   /* Balanced mid-tone */
    --text-third: #8b95a5;    /* Soft cool gray */
    --background: #f8fcfb;    /* Subtle turquoise-white */
    --background-secondary: #f2f9f8;  /* Light turquoise tint */
    --primary: #3cbba3;       /* Deeper turquoise */
    --accent: #4fd6bc;        /* Main turquoise accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: white;
    --background-lighter: color-mix(in srgb, var(--background) 75%, white);
    --background-darker: color-mix(in srgb, var(--background) 75%, black);
    --background-darkest: color-mix(in srgb, var(--background) 50%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 50%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 25%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 25%, black);

    /* Add special border colors for light mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, black); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, black);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, black);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, black); /* Emphasised border */
}

/* a-c-c8 Dark Theme */
[data-accent-color="a-c-c8"][data-bs-theme="dark"] {
    /* Main colors */
    --text: #e6f3f0;          /* Bright turquoise-white */
    --text-second: #a8c5bf;   /* Mid turquoise-gray */
    --text-third: #729892;    /* Deep turquoise-gray */
    --background: #101918;    /* Rich dark turquoise base */
    --background-secondary: #131e1d;  /* Elevated dark turquoise */
    --primary: #3cbba3;       /* Deeper turquoise */
    --accent: #4fd6bc;        /* Main turquoise accent */

    /* Text variations */
    --text-lightest: color-mix(in srgb, var(--text) 25%, white);
    --text-lighter: color-mix(in srgb, var(--text) 50%, white);
    --text-darker: color-mix(in srgb, var(--text) 50%, black);
    --text-darkest: color-mix(in srgb, var(--text) 25%, black);
      
    /* Background variations */
    --background-lightest: color-mix(in srgb, var(--background) 25%, white);
    --background-lighter: color-mix(in srgb, var(--background) 50%, white);
    --background-darker: color-mix(in srgb, var(--background) 50%, black);
    --background-darkest: color-mix(in srgb, var(--background) 75%, black);

    /* Background Secondary variations */
    --background-secondary-lightest: color-mix(in srgb, var(--background-secondary) 90%, white);
    --background-secondary-lighter: color-mix(in srgb, var(--background-secondary) 75%, white);
    --background-secondary-darker: color-mix(in srgb, var(--background-secondary) 50%, black);
    --background-secondary-darkest: color-mix(in srgb, var(--background-secondary) 75%, black);

    /* Primary variations */
    --primary-lightest: color-mix(in srgb, var(--primary) 25%, white);
    --primary-lighter: color-mix(in srgb, var(--primary) 50%, white);
    --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
    --primary-darkest: color-mix(in srgb, var(--primary) 75%, black);

    /* Accent variations */
    --accent-lightest: color-mix(in srgb, var(--accent) 25%, white);
    --accent-lighter: color-mix(in srgb, var(--accent) 50%, white);
    --accent-darker: color-mix(in srgb, var(--accent) 50%, black);
    --accent-darkest: color-mix(in srgb, var(--accent) 75%, black);

    /* Add special border colors for dark mode */
    --border-subtle: color-mix(in srgb, var(--background) 95%, white); /* Very subtle */
    --border-light: color-mix(in srgb, var(--background) 90%, white);  /* Light divider */
    --border-base: color-mix(in srgb, var(--background) 85%, white);   /* Standard border */
    --border-strong: color-mix(in srgb, var(--background) 80%, white); /* Emphasised border */
}