﻿/* bootstrap-evf-colors.css */

/*
=========================================================
Eigenverft Palette (codenames)
Raw "paint" colors (do not change per theme).
=========================================================
*/

/* 
    Helper links:
    https://hihayk.github.io/scale

    Bluecoat:
    https://hihayk.github.io/scale/#6/9/0/79/310/67/100/100/06213a/6/33/58/white
    
    Icesail:
    https://hihayk.github.io/scale/#9/6/79/0/67/310/100/100/d9f0ff/217/240/255/black

*/

:root {
    /* A light background */
    --evf-creammap-rgb: 246, 240, 227; /* CreamSailcloth / Linen-ish */
    /* Darker colors for the light background */
    --evf-bluecoat-base-rgb: 6, 33, 58; /* HarborNavyBlue / Oxford Blue */
    --evf-bluecoat-teal-rgb: 2, 62, 39; /* #023E27 (dark green) */
    --evf-bluecoat-green-rgb: 14, 67, 0; /* #0E4300 (very dark green) */
    --evf-bluecoat-yellow-rgb: 71, 63, 0; /* #473F00 (dark yellow / olive-ish) */
    --evf-bluecoat-red-rgb: 75, 0, 0; /* #4B0000 */
    --evf-bluecoat-purple-rgb: 80, 0, 63; /* #50003F */
    --evf-bluecoat-violet-rgb: 13, 0, 84; /* #0D0054 (violet/indigo) */

    --evf-bluecoat-base-90-rgb: 196, 224, 233; /* #C4E0E9 */
    --evf-bluecoat-base-80-rgb: 175, 208, 210; /* #AFD0D2 */
    --evf-bluecoat-base-70-rgb: 155, 188, 188; /* #9BBCBC */
    --evf-bluecoat-base-60-rgb: 135, 166, 166; /* #87A6A6 */
    --evf-bluecoat-base-50-rgb: 116, 143, 142; /* #748F8E */
    --evf-bluecoat-base-40-rgb: 97, 121, 116; /* #617974 */
    --evf-bluecoat-base-30-rgb: 78, 98, 92; /* #4E625C */
    --evf-bluecoat-base-20-rgb: 60, 76, 68; /* #3C4C44 */
    --evf-bluecoat-base-10-rgb: 42, 54, 46; /* #2A362E */
    /* A dark background */
    --evf-tarink-rgb: 9, 14, 15; /* TarBlack / Rich Black-ish */
    /* Lighter colors for the light background */
    --evf-icesail-base-rgb: 217, 240, 255; /* BlueIceSail / Alice Blue-ish */
    --evf-icesail-teal-rgb: 214, 255, 238; /* #D6FFEE */
    --evf-icesail-green-rgb: 227, 255, 211; /* #E3FFD3 */
    --evf-icesail-yellow-rgb: 255, 254, 208; /* #FFFED0 */
    --evf-icesail-red-rgb: 255, 204, 208; /* #FFCCD0 */
    --evf-icesail-purple-rgb: 255, 201, 255; /* #FFC9FF */
    --evf-icesail-violet-rgb: 215, 198, 255; /* #D7C6FF */

    --evf-icesail-base-90-rgb: 196, 224, 233; /* #C4E0E9 */
    --evf-icesail-base-80-rgb: 175, 208, 210; /* #AFD0D2 */
    --evf-icesail-base-70-rgb: 155, 188, 188; /* #9BBCBC */
    --evf-icesail-base-60-rgb: 135, 166, 166; /* #87A6A6 */
    --evf-icesail-base-50-rgb: 116, 143, 142; /* #748F8E */
    --evf-icesail-base-40-rgb: 97, 121, 116; /* #617974 */
    --evf-icesail-base-30-rgb: 78, 98, 92; /* #4E625C */
    --evf-icesail-base-20-rgb: 60, 76, 68; /* #3C4C44 */
    --evf-icesail-base-10-rgb: 42, 54, 46; /* #2A362E */
}

/* Derived colors (non-rgb tokens) */
:root {
    /* Light background */
    --evf-creammap: rgb(var(--evf-creammap-rgb));
    /* Darker colors for the light background */
    --evf-bluecoat-base: rgb(var(--evf-bluecoat-base-rgb));
    --evf-bluecoat-teal: rgb(var(--evf-bluecoat-teal-rgb));
    --evf-bluecoat-green: rgb(var(--evf-bluecoat-green-rgb));
    --evf-bluecoat-yellow: rgb(var(--evf-bluecoat-yellow-rgb));
    --evf-bluecoat-red: rgb(var(--evf-bluecoat-red-rgb));
    --evf-bluecoat-purple: rgb(var(--evf-bluecoat-purple-rgb));
    --evf-bluecoat-violet: rgb(var(--evf-bluecoat-violet-rgb));
    /* Bluecoat scale to lighter colors */
    --evf-bluecoat-base-90: rgb(var(--evf-bluecoat-base-90-rgb));
    --evf-bluecoat-base-80: rgb(var(--evf-bluecoat-base-80-rgb));
    --evf-bluecoat-base-70: rgb(var(--evf-bluecoat-base-70-rgb));
    --evf-bluecoat-base-60: rgb(var(--evf-bluecoat-base-60-rgb));
    --evf-bluecoat-base-50: rgb(var(--evf-bluecoat-base-50-rgb));
    --evf-bluecoat-base-40: rgb(var(--evf-bluecoat-base-40-rgb));
    --evf-bluecoat-base-30: rgb(var(--evf-bluecoat-base-30-rgb));
    --evf-bluecoat-base-20: rgb(var(--evf-bluecoat-base-20-rgb));
    --evf-bluecoat-base-10: rgb(var(--evf-bluecoat-base-10-rgb));
    /* Dark background */
    --evf-tarink: rgb(var(--evf-tarink-rgb));
    /* Lighter colors for the dark background */
    --evf-icesail-base: rgb(var(--evf-icesail-base-rgb));
    --evf-icesail-teal: rgb(var(--evf-icesail-teal-rgb));
    --evf-icesail-green: rgb(var(--evf-icesail-green-rgb));
    --evf-icesail-yellow: rgb(var(--evf-icesail-yellow-rgb));
    --evf-icesail-red: rgb(var(--evf-icesail-red-rgb));
    --evf-icesail-purple: rgb(var(--evf-icesail-purple-rgb));
    --evf-icesail-violet: rgb(var(--evf-icesail-violet-rgb));
    /* Icesail scale to darker colors */
    --evf-icesail-base-90: rgb(var(--evf-icesail-base-90-rgb));
    --evf-icesail-base-80: rgb(var(--evf-icesail-base-80-rgb));
    --evf-icesail-base-70: rgb(var(--evf-icesail-base-70-rgb));
    --evf-icesail-base-60: rgb(var(--evf-icesail-base-60-rgb));
    --evf-icesail-base-50: rgb(var(--evf-icesail-base-50-rgb));
    --evf-icesail-base-40: rgb(var(--evf-icesail-base-40-rgb));
    --evf-icesail-base-30: rgb(var(--evf-icesail-base-30-rgb));
    --evf-icesail-base-20: rgb(var(--evf-icesail-base-20-rgb));
    --evf-icesail-base-10: rgb(var(--evf-icesail-base-10-rgb));
}



/* 
   Put this AFTER Bootstrap’s CSS to override Bootstrap theme tokens with your EVF palette.
   Note: Bootstrap has “orange” + “cyan” tokens, but your palette doesn’t—so they’re mapped to yellow + teal.
*/

/* 
   Put this AFTER Bootstrap’s CSS to override Bootstrap theme tokens with your EVF palette.
   Note: Bootstrap has “orange” + “cyan” tokens, but your palette doesn’t—so they’re mapped to yellow + teal.
*/

:root,
[data-bs-theme=light] {
    /* Core palette */
    --bs-blue: var(--evf-bluecoat-base);
    --bs-indigo: var(--evf-bluecoat-violet);
    --bs-purple: var(--evf-bluecoat-purple);
    --bs-pink: var(--evf-bluecoat-purple);
    --bs-red: var(--evf-bluecoat-red);
    --bs-orange: var(--evf-bluecoat-yellow);
    --bs-yellow: var(--evf-bluecoat-yellow);
    --bs-green: var(--evf-bluecoat-green);
    --bs-teal: var(--evf-bluecoat-teal);
    --bs-cyan: var(--evf-bluecoat-teal);
    --bs-black: var(--evf-tarink);
    --bs-white: var(--evf-creammap);

    /* Grays (mapped to your scale) */
    --bs-gray: var(--evf-bluecoat-base-40);
    --bs-gray-dark: var(--evf-bluecoat-base-20);
    --bs-gray-100: var(--evf-bluecoat-base-90);
    --bs-gray-200: var(--evf-bluecoat-base-80);
    --bs-gray-300: var(--evf-bluecoat-base-70);
    --bs-gray-400: var(--evf-bluecoat-base-60);
    --bs-gray-500: var(--evf-bluecoat-base-50);
    --bs-gray-600: var(--evf-bluecoat-base-40);
    --bs-gray-700: var(--evf-bluecoat-base-30);
    --bs-gray-800: var(--evf-bluecoat-base-20);
    --bs-gray-900: var(--evf-bluecoat-base-10);
    /* Semantic colors */
    --bs-primary: var(--evf-bluecoat-base);
    --bs-secondary: var(--evf-bluecoat-base-40);
    --bs-success: var(--evf-bluecoat-green);
    --bs-info: var(--evf-bluecoat-teal);
    --bs-warning: var(--evf-bluecoat-yellow);
    --bs-danger: var(--evf-bluecoat-red);
    --bs-light: var(--evf-creammap);
    --bs-dark: var(--evf-tarink);
    /* RGB tokens */
    --bs-primary-rgb: var(--evf-bluecoat-base-rgb);
    --bs-secondary-rgb: var(--evf-bluecoat-base-40-rgb);
    --bs-success-rgb: var(--evf-bluecoat-green-rgb);
    --bs-info-rgb: var(--evf-bluecoat-teal-rgb);
    --bs-warning-rgb: var(--evf-bluecoat-yellow-rgb);
    --bs-danger-rgb: var(--evf-bluecoat-red-rgb);
    --bs-light-rgb: var(--evf-creammap-rgb);
    --bs-dark-rgb: var(--evf-tarink-rgb);
    /* Emphasis / subtle */
    --bs-primary-text-emphasis: var(--evf-bluecoat-base);
    --bs-secondary-text-emphasis: var(--evf-bluecoat-base-20);
    --bs-success-text-emphasis: var(--evf-bluecoat-green);
    --bs-info-text-emphasis: var(--evf-bluecoat-teal);
    --bs-warning-text-emphasis: var(--evf-bluecoat-yellow);
    --bs-danger-text-emphasis: var(--evf-bluecoat-red);
    --bs-light-text-emphasis: var(--evf-bluecoat-base-30);
    --bs-dark-text-emphasis: var(--evf-tarink);
    --bs-primary-bg-subtle: var(--evf-bluecoat-base-90);
    --bs-secondary-bg-subtle: var(--evf-bluecoat-base-80);
    --bs-success-bg-subtle: var(--evf-icesail-green);
    --bs-info-bg-subtle: var(--evf-icesail-teal);
    --bs-warning-bg-subtle: var(--evf-icesail-yellow);
    --bs-danger-bg-subtle: var(--evf-icesail-red);
    --bs-light-bg-subtle: var(--evf-creammap);
    --bs-dark-bg-subtle: var(--evf-bluecoat-base-70);
    --bs-primary-border-subtle: var(--evf-bluecoat-base-80);
    --bs-secondary-border-subtle: var(--evf-bluecoat-base-70);
    --bs-success-border-subtle: var(--evf-bluecoat-green);
    --bs-info-border-subtle: var(--evf-bluecoat-teal);
    --bs-warning-border-subtle: var(--evf-bluecoat-yellow);
    --bs-danger-border-subtle: var(--evf-bluecoat-red);
    --bs-light-border-subtle: var(--evf-bluecoat-base-80);
    --bs-dark-border-subtle: var(--evf-bluecoat-base-50);
    --bs-white-rgb: var(--evf-creammap-rgb);
    --bs-black-rgb: var(--evf-tarink-rgb);
    /* Typography / sizing (unchanged) */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(var(--bs-white-rgb), 0.15), rgba(var(--bs-white-rgb), 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    /* Body */
    --bs-body-color: var(--evf-bluecoat-base);
    --bs-body-color-rgb: var(--evf-bluecoat-base-rgb);
    --bs-body-bg: var(--evf-creammap);
    --bs-body-bg-rgb: var(--evf-creammap-rgb);
    --bs-emphasis-color: var(--evf-tarink);
    --bs-emphasis-color-rgb: var(--evf-tarink-rgb);
    --bs-secondary-color: rgba(var(--bs-body-color-rgb), 0.75);
    --bs-secondary-color-rgb: var(--bs-body-color-rgb);
    --bs-secondary-bg: var(--bs-gray-200);
    --bs-secondary-bg-rgb: var(--evf-bluecoat-base-80-rgb);
    --bs-tertiary-color: rgba(var(--bs-body-color-rgb), 0.5);
    --bs-tertiary-color-rgb: var(--bs-body-color-rgb);
    --bs-tertiary-bg: var(--bs-gray-100);
    --bs-tertiary-bg-rgb: var(--evf-bluecoat-base-90-rgb);
    --bs-heading-color: inherit;
    /* Links / code / highlight */
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-decoration: underline;
    --bs-link-hover-color: var(--evf-bluecoat-violet);
    --bs-link-hover-color-rgb: var(--evf-bluecoat-violet-rgb);
    --bs-code-color: var(--evf-bluecoat-purple);
    --bs-highlight-color: var(--bs-body-color);
    --bs-highlight-bg: var(--evf-icesail-yellow);
    /* Borders / radius / shadows (mostly unchanged) */
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: var(--bs-gray-300);
    --bs-border-color-translucent: rgba(var(--bs-black-rgb), 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
    --bs-form-valid-color: var(--bs-success);
    --bs-form-valid-border-color: var(--bs-success);
    --bs-form-invalid-color: var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);
}

[data-bs-theme=dark] {
    color-scheme: dark;
    /* Core palette (swap to IceSail for dark mode) */
    --bs-blue: var(--evf-icesail-base);
    --bs-indigo: var(--evf-icesail-violet);
    --bs-purple: var(--evf-icesail-purple);
    --bs-pink: var(--evf-icesail-purple);
    --bs-red: var(--evf-icesail-red);
    --bs-orange: var(--evf-icesail-yellow);
    --bs-yellow: var(--evf-icesail-yellow);
    --bs-green: var(--evf-icesail-green);
    --bs-teal: var(--evf-icesail-teal);
    --bs-cyan: var(--evf-icesail-teal);
    /* Semantic colors (FIXED: primary = IceSail base, like light theme primary = Bluecoat base) */
    --bs-primary: var(--evf-icesail-base);
    --bs-secondary: var(--evf-icesail-base-60);
    --bs-success: var(--evf-icesail-green);
    --bs-info: var(--evf-icesail-teal);
    --bs-warning: var(--evf-icesail-yellow);
    --bs-danger: var(--evf-icesail-red);
    --bs-light: var(--evf-tarink);
    --bs-dark: var(--evf-creammap);

    /* Grays (mapped to your IceSail scale, mirroring the light-mode Bluecoat mapping) */
    --bs-gray: var(--evf-icesail-base-40);
    --bs-gray-dark: var(--evf-icesail-base-20);
    --bs-gray-100: var(--evf-icesail-base-90);
    --bs-gray-200: var(--evf-icesail-base-80);
    --bs-gray-300: var(--evf-icesail-base-70);
    --bs-gray-400: var(--evf-icesail-base-60);
    --bs-gray-500: var(--evf-icesail-base-50);
    --bs-gray-600: var(--evf-icesail-base-40);
    --bs-gray-700: var(--evf-icesail-base-30);
    --bs-gray-800: var(--evf-icesail-base-20);
    --bs-gray-900: var(--evf-icesail-base-10);
    /* RGB tokens (FIXED) */
    --bs-primary-rgb: var(--evf-icesail-base-rgb);
    --bs-secondary-rgb: var(--evf-icesail-base-60-rgb);
    --bs-success-rgb: var(--evf-icesail-green-rgb);
    --bs-info-rgb: var(--evf-icesail-teal-rgb);
    --bs-warning-rgb: var(--evf-icesail-yellow-rgb);
    --bs-danger-rgb: var(--evf-icesail-red-rgb);
    --bs-light-rgb: var(--evf-creammap-rgb);
    --bs-dark-rgb: var(--evf-tarink-rgb);
    /* Body */
    --bs-body-color: var(--evf-icesail-base);
    --bs-body-color-rgb: var(--evf-icesail-base-rgb);
    --bs-body-bg: var(--evf-tarink);
    --bs-body-bg-rgb: var(--evf-tarink-rgb);
    --bs-emphasis-color: var(--evf-creammap);
    --bs-emphasis-color-rgb: var(--evf-creammap-rgb);
    --bs-secondary-color: rgba(var(--bs-body-color-rgb), 0.75);
    --bs-secondary-color-rgb: var(--bs-body-color-rgb);
    --bs-secondary-bg: var(--evf-bluecoat-base-10);
    --bs-secondary-bg-rgb: var(--evf-bluecoat-base-10-rgb);
    --bs-tertiary-color: rgba(var(--bs-body-color-rgb), 0.5);
    --bs-tertiary-color-rgb: var(--bs-body-color-rgb);
    --bs-tertiary-bg: var(--evf-bluecoat-base-20);
    --bs-tertiary-bg-rgb: var(--evf-bluecoat-base-20-rgb);
    /* Emphasis / subtle (FIXED primary emphasis to base for consistency) */
    --bs-primary-text-emphasis: var(--evf-icesail-base);
    --bs-secondary-text-emphasis: var(--evf-icesail-base-70);
    --bs-success-text-emphasis: var(--evf-icesail-green);
    --bs-info-text-emphasis: var(--evf-icesail-teal);
    --bs-warning-text-emphasis: var(--evf-icesail-yellow);
    --bs-danger-text-emphasis: var(--evf-icesail-red);
    --bs-light-text-emphasis: var(--evf-creammap);
    --bs-dark-text-emphasis: var(--evf-icesail-base-80);
    /* Subtle backgrounds/borders in dark mode (use dark “Bluecoat” as subtle surfaces) */
    --bs-primary-bg-subtle: var(--evf-bluecoat-base);
    --bs-secondary-bg-subtle: var(--evf-bluecoat-base-10);
    --bs-success-bg-subtle: var(--evf-bluecoat-green);
    --bs-info-bg-subtle: var(--evf-bluecoat-teal);
    --bs-warning-bg-subtle: var(--evf-bluecoat-yellow);
    --bs-danger-bg-subtle: var(--evf-bluecoat-red);
    --bs-light-bg-subtle: var(--evf-bluecoat-base-20);
    --bs-dark-bg-subtle: var(--evf-tarink);
    --bs-primary-border-subtle: var(--evf-bluecoat-base-40);
    --bs-secondary-border-subtle: var(--evf-bluecoat-base-30);
    --bs-success-border-subtle: var(--evf-bluecoat-green);
    --bs-info-border-subtle: var(--evf-bluecoat-teal);
    --bs-warning-border-subtle: var(--evf-bluecoat-yellow);
    --bs-danger-border-subtle: var(--evf-bluecoat-red);
    --bs-light-border-subtle: var(--evf-bluecoat-base-30);
    --bs-dark-border-subtle: var(--evf-bluecoat-base-20);
    --bs-heading-color: inherit;
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--evf-icesail-purple);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color-rgb: var(--evf-icesail-purple-rgb);
    --bs-code-color: var(--evf-icesail-purple);
    --bs-highlight-color: var(--bs-body-color);
    --bs-highlight-bg: var(--evf-bluecoat-yellow);
    --bs-border-color: var(--evf-bluecoat-base-30);
    --bs-border-color-translucent: rgba(var(--bs-white-rgb), 0.15);
    --bs-form-valid-color: var(--bs-success);
    --bs-form-valid-border-color: var(--bs-success);
    --bs-form-invalid-color: var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);
}

