:root {
     /* =======================================
       BRAND / ACCENT
       ======================================= */

    --color-primary: #213E66;
    --color-primary-rgb: 33,62,102;
    --color-primary-active: var(--color-primary-700);
    --color-primary-text: #ffffff;
    --color-primary-subtle: rgba(
        var(--color-primary-rgb),
        .40
    );
    --color-primary-subtle-xtra: rgba(
        var(--color-primary-rgb),
        .30
    );
    --color-primary-100: color-mix(in srgb, var(--color-primary) 20%, white);
    --color-primary-200: color-mix(in srgb, var(--color-primary) 40%, white);
    --color-primary-300: color-mix(in srgb, var(--color-primary) 60%, white);
    --color-primary-400: color-mix(in srgb, var(--color-primary) 80%, white);
    --color-primary-700: color-mix(in srgb, var(--color-primary) 85%, black);
    --color-primary-800: color-mix(in srgb, var(--color-primary) 70%, black);
    --color-primary-900: color-mix(in srgb, var(--color-primary) 55%, black);



    --color-secondary: #f97370;
    --color-secondary-rgb: 249,115,112;
    --color-secondary-active:var(--color-secondary-700);
    --color-secondary-text: #ffffff;
    --color-secondary-subtle: rgba(
        var(--color-secondary-rgb),
        .40
    );
    --color-secondary-subtle-xtra: rgba(
        var(--color-secondary-rgb),
        .30
    );

    --color-secondary-100: color-mix(in srgb, var(--color-secondary) 20%, white);
    --color-secondary-200: color-mix(in srgb, var(--color-secondary) 40%, white);
    --color-secondary-300: color-mix(in srgb, var(--color-secondary) 60%, white);
    --color-secondary-400: color-mix(in srgb, var(--color-secondary) 80%, white);
    --color-secondary-700: color-mix(in srgb, var(--color-secondary) 85%, black);
    --color-secondary-800: color-mix(in srgb, var(--color-secondary) 70%, black);
    --color-secondary-900: color-mix(in srgb, var(--color-secondary) 55%, black);



    /* =======================================
       SURFACE COLORS
       ======================================= */

    --color-bg: var(--color-secondary-100);
    --color-bg-alt: var(--color-secondary-200);

    --color-surface: #ffffff;
    --color-surface-hover: #f8f9fa;

    --color-card: #ffffff;
    --color-card-hover: #f5f5f5;

    --color-sidebar-bg: var(--color-primary-800);
    --color-sidebar-text: var(--color-primary-text);

    /* =======================================
       TEXT COLORS
       ======================================= */

    --color-text: var(--color-primary);
    --color-text-muted: var(--color-primary-subtle);
    --color-text-subtle: var(--color-primary-subtle-xtra);
    --color-heading: var(--color-primary-700);

    /* =======================================
       BORDERS
       ======================================= */

    --color-border: #d7d7d7;
    --color-border-strong: #bcbcbc;
    --color-focus-ring: rgba(
        var(--color-secondary-rgb),
        .35
    );
    --radius-pill: 50px;

    /* =======================================
       LINKS
       ======================================= */

    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-hover);

    /* =======================================
       FORMS
       ======================================= */

    --color-input-bg: #ffffff;
    --color-input-text: #212529;
    --color-input-border: #ced4da;
    --color-input-focus: var(--color-primary);
    --color-input-focus-shadow:
        rgba(
        var(--color-primary-rgb),
        .35
    );

    /* =======================================
       BUTTONS
       ======================================= */

    --color-button-bg: var(--color-primary);
    --color-button-hover: var(--color-primary-hover);
    --color-button-active: var(--color-primary-active);
    --color-button-text: var(--color-primary-text);

    /* =======================================
       FEEDBACK
       ======================================= */

    --color-success: #198754;
    --color-success-bg: #d1e7dd;

    --color-warning: #ffc107;
    --color-warning-bg: #fff3cd;

    --color-danger: #dc3545;
    --color-danger-bg: #f8d7da;

    --color-info: #0dcaf0;
    --color-info-bg: #cff4fc;

    /* =======================================
       FONTS - Unlikely to change at this point
       ======================================= */

    --font-primary:
        "Albert Sans",
        sans-serif;

    --font-secondary:
        "Abril Fatface",
        serif;

    /* =======================================
       BOOTSTRAP MAPPING
       ======================================= */

    --bs-primary: var(--color-primary);
    --bs-secondary: var(--color-secondary);

    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-link);

    --bs-link-hover-color: var(--color-link-hover);
    --bs-font-sans-serif: var(--font-primary);

    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary-rgb: var(--color-secondary-rgb);

    --bs-card-color:var(--color-text);
    --bs-card-bg:var(--color-surface);


    /*-- Form Mapping --*/
    /* --bs-border-color: var(--color-primary);
    --bs-border-width: 4px;
    --bs-border-radius-lg: var(--radius-pill); */
}
/* .form-control {
    border: 0px solid;
    background: var(--color-secondary-subtle);
} */


html {
  scrollbar-width: thin;          /* Options: auto | thin | none */
  scrollbar-color: var(--color-secondary-300) var(--color-bg); /* thumb color | track color */
}

   /* =======================================
       BOOTSTRAP BUTTON MAPPING
       ======================================= */
.btn {
    --bs-btn-border-radius: var(--radius-pill);        
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.75rem;
}
.btn-primary {    
    --bs-btn-color: var(--color-primary-text);
    --bs-btn-bg:var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary-text);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--color-primary-text);
    --bs-btn-active-bg: var(--color-primary-active);
    --bs-btn-active-border-color: var(--color-primary-active);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-primary-text);
    --bs-btn-disabled-bg: var(--color-primary-subtle);
    --bs-btn-disabled-border-color: var(--color-primary-subtle);
}

.btn-secondary {    
    --bs-btn-color: var(--color-secondary-text);
    --bs-btn-bg:var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: var(--color-secondary-text);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-border-color: var(--color-secondary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--color-secondary-text);
    --bs-btn-active-bg: var(--color-secondary-active);
    --bs-btn-active-border-color: var(--color-secondary-active);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-secondary-text);
    --bs-btn-disabled-bg: var(--color-secondary-subtle);
    --bs-btn-disabled-border-color: var(--color-secondary-subtle);
}

[data-theme="dark"] {

    --color-bg: #0f1115;
    --color-bg-alt: #161a22;

    --color-surface: #1b2028;
    --color-surface-hover: #252b35;

    --color-card: #1b2028;
    --color-card-hover: #252b35;

    --color-text: #e7e7e7;
    --color-text-muted: #a6a6a6;
    --color-text-subtle: #7d7d7d;

    --color-heading: #ffffff;

    --color-border: #343a40;
    --color-border-strong: #4b535c;

    --color-input-bg: #1b2028;
    --color-input-text: #ffffff;

    --color-input-border: #495057;

}

/* -------------------------------
    Derive colors from this template:
    -------------------------------
{
    primary: "#213E66",
    secondary: "#f97370",
    bg: "#fcede7",
    surface: "#ffffff"
}
-------------------------------*/


:root[data-theme="light"] {
    --theme-bg: #ffffff;
    --theme-surface: #f8f9fa;
    --theme-text: #212529;
}

:root[data-theme="dark"] {
    --theme-bg: #121212;
    --theme-surface: #1e1e1e;
    --theme-text: #f8f9fa;
}

:root[data-theme="vinyl"] {
    --theme-primary: #111111;
    --theme-secondary: #d4af37;
    --theme-bg: #fafafa;
}

:root[data-theme="neonclub"] {
    --theme-primary: #00e5ff;
    --theme-secondary: #ff00ff;
    --theme-bg: #0a0a0a;
}

:root[data-theme="recordstore"] {
    --theme-primary: #7b2d26;
    --theme-secondary: #d9a441;
    --theme-bg: #f4ede4;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-primary);
}

.button {
    background: var(--button-bg);
    color: var(--button-text);
}

.header {
    border-color: var(--secondary-color);
}

/* --- Test ---*/

.form-control:focus,
.form-select:focus {
    border-color: var(--color-secondary-400);
    box-shadow:
        0 0 0 0.25rem
        var(--color-focus-ring);

}


/* Sparkle */
.sparkle {
    --size: 20px;
    width: var(--size);
    height: var(--size);
}


.sparkle {
    --size: 20px;
    width: var(--size);
    height: var(--size);

    background:
        var(--color-secondary);

    -webkit-mask:
        url("/images/svg/sparkle.svg")
        center
        / contain
        no-repeat;

    mask:
        url("/images/svg/sparkle.svg")
        center
        / contain
        no-repeat;

}


/* .sparkle::after {
    content: "";
    position: absolute;
    width: var(--size);
    height: var(--size);

    background-repeat: no-repeat;
    background-size: contain;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23F18B84' d='M50 0 C58 35 65 42 100 50 C65 58 58 65 50 100 C42 65 35 58 0 50 C35 42 42 35 50 0 Z'/%3E%3C/svg%3E");

} */
.sparkle-lg {
    --size: 40px;
}

.sparkle-md {
    --size: 24px;
}

.sparkle-sm {
    --size: 12px;
}


/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
}

/* Generalize Form */

.form-label {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 0.8rem;
}
.form-control, .form-select,
.form-control::placeholder, .form-select::placeholder {
  --bs-border-color: var(--color-secondary-subtle);
  --bs-border-width: 2px;
  color: var(--color-primary);
}