/*
────────────────────────────────────────
1   CORE BRAND HUES
────────────────────────────────────────
Lavender (Primary)
• P-500  #9966CC   logo fills, large surfaces
• P-600  #7A41BF   body text / icons on light bg (AA 4.9∶1)
• P-050  #F4EEFC   very-light UI backgrounds

Teal (Complement / CTA)
• C-500  #29C6A4   main buttons, links, success state
• C-600  #1DA88B   hover / active
• C-050  #E6FBF7   tint

Amber (Triadic Accent)
• T-500  #FFB547   highlights, warnings, illustration warmth
• T-600  #E89B2B   hover / dark-mode text
• T-050  #FFF8EC   tint

Neutrals
• N-000 #FFFFFF   base light
• N-050 #F6F6F7   containers, inputs
• N-700 #353535   secondary text
• N-900 #121212   dark-mode cards / body
• N-950 #0B0B0B   dark-mode bg

Functional
• Danger  #FF4C4C
• Info    #4A7CFF

────────────────────────────────────────
2   ACCESSIBILITY RULES
────────────────────────────────────────
• Small/paragraph text on light bg ≥ P-600 or C-500 (contrast ≥ 4.5∶1).
• On dark bg (N-900+), invert tint: use P-300 (#B08AE0) and C-300 (#6FDCCD).
• Never use P-500 for text ≤ 18 px.
• Amber T-500 only on dark backgrounds or as filled element, not body text.

────────────────────────────────────────
3   USAGE CHEAT-SHEET
────────────────────────────────────────
LOGO   Lavender on white    /   white on P-600 for dark contexts.
TOP-NAV / FOOTER   fill P-500; text/ico white.
PRIMARY BUTTON   bg C-500 → hover C-600; text white; disabled N-050 with N-300 text.
SECONDARY BUTTON   outline P-600; text P-600; hover fill-transparent-to-P-050.
LINKS   P-600; underline on hover.
FOCUS RING   P-500 @ 40 % opacity.
FORM SUCCESS   border/ico C-500; ERROR   #FF4C4C.
DATA VIS / CHARTS   cool series = tints of P; key datapoint = T-500.
DARK-MODE   bg N-950; cards N-900; primary interactive P-300; CTA C-300.
 */
:root {
    /* Primary */
    --p-050: #F4EEFC; /* very-light UI backgrounds */
    --p-050-rgb: 244, 238, 252;
    --p-300: #B08AE0; /* inverted tint for dark bg */
    --p-300-rgb: 176, 138, 224;
    --p-500: #9966CC; /* logo fills, large surfaces */
    --p-500-rgb: 153, 102, 204;
    --p-600: #7A41BF; /* body text / icons on light bg (AA 4.9∶1) */
    --p-600-rgb: 122, 65, 191;

    /* Complement / CTA */
    --c-050: #E6FBF7; /* tint */
    --c-050-rgb: 230, 251, 247;
    --c-300: #6FDCCD; /* inverted tint for dark bg */
    --c-300-rgb: 111, 220, 205;
    --c-500: #29C6A4; /* main buttons, links, success state */
    --c-500-rgb: 41, 198, 164;
    --c-600: #1DA88B; /* hover / active */
    --c-600-rgb: 29, 168, 139;

    /* Triadic Accent */
    --t-050: #FFF8EC; /* tint */
    --t-050-rgb: 255, 248, 236;
    --t-500: #FFB547; /* highlights, warnings, illustration warmth */
    --t-500-rgb: 255, 181, 71;
    --t-600: #E89B2B; /* hover / dark-mode text */
    --t-600-rgb: 232, 155, 43;

    /* Neutrals */
    --n-000: #FFFFFF; /* base light */
    --n-000-rgb: 255, 255, 255;
    --n-050: #F6F6F7; /* containers, inputs */
    --n-050-rgb: 246, 246, 247;
    --n-100: #E0E0E1;  /* hair-line strokes, dividers on white */
    --n-100-rgb: 224, 224, 225;
    --n-700: #353535; /* secondary text */
    --n-700-rgb: 53, 53, 53;
    --n-900: #121212; /* dark-mode cards / body */
    --n-900-rgb: 18, 18, 18;
    --n-950: #0B0B0B; /* dark-mode bg */
    --n-950-rgb: 11, 11, 11;

    /* Functional */
    --danger-500: #FF4C4C; /* danger */
    --danger-500-rgb: 255, 76, 76;
    --info-500: #4A7CFF; /* info */
    --info-500-rgb: 74, 124, 255;

    /* Modal */
    --modal-border-light: var(--n-100); /* light-theme border (same tint as containers) */
    --modal-border-dark: var(--n-900); /* dark-theme border (same shade as cards) */

    --modal-shadow-light: 0 2px 28px rgba(var(--n-700-rgb), .48);
    --modal-shadow-dark:  0 2px 28px rgba(var(--n-000-rgb), .46);


    /* Default – will be overridden in a prefers-color-scheme query */
    --modal-border: var(--modal-border-light);
    --modal-shadow: var(--modal-shadow-light);
}

/*
@media (prefers-color-scheme: dark) {
    :root {
        --modal-border: var(--modal-border-dark);
    }
}*/