@import url('reboot.css');
@import url('tokens.css');

:root {
    /* ============ ClubFlow design tokens — see design/design-guide.md ============ */

    /* ---- Primitives: Flow Blue (brand) ---- */
    --brand-50: #EAF6FC;
    --brand-100: #CBEAF6;
    --brand-200: #9DD8ED;
    --brand-300: #6BC2E2;
    --brand-400: #3CAADC;
    --brand-500: #1E93C9;
    --brand-600: #1677A6;
    --brand-700: #0F5C84;
    --brand-800: #0B4562;
    --brand-900: #082F44;

    /* ---- Primitives: Slate (neutrals) ---- */
    --slate-0: #FFFFFF;
    --slate-50: #F8FAFC;
    --slate-100: #EEF1F4;
    --slate-200: #DDE2E8;
    --slate-300: #C2C9D2;
    --slate-400: #8D96A3;
    --slate-500: #5D6572;
    --slate-600: #3F4652;
    --slate-700: #2B3038;
    --slate-800: #1D2127;
    --slate-900: #121417;

    /* ---- Primitives: Amber (accent) ---- */
    --amber-400: #FFBC1B;
    --amber-500: #F0A500;
    --amber-600: #C9860A;

    /* ---- Primitives: semantic (money & status) ---- */
    --success-100: #E1F6EE;
    --success-500: #0E9F6E;
    --success-600: #0B7A55;
    --danger-100: #FBE9E9;
    --danger-500: #DC4C4C;
    --danger-600: #B23A3A;
    --warning-500: #E1A93F;

    /* ---- App semantic tokens (consumed by src/Web *.razor.css) ---- */
    --background: var(--slate-50);
    --surface: var(--slate-0);
    --menu: var(--slate-700);
    --menu-children: var(--slate-800);
    --menu-foreground: var(--slate-0);
    --border: var(--slate-200);

    --color-text: var(--slate-600);
    --color-text-secondary: var(--slate-500);
    --color-control-text: var(--slate-600);
    --color-control-text-inverse: var(--slate-0);
    --color-control-filter: invert(26%) sepia(15%) saturate(1145%) hue-rotate(135deg) brightness(92%) contrast(88%);

    --primary: var(--brand-500);
    --primary-hover: var(--brand-600);
    --primary-foreground: var(--slate-0);
    --secondary: var(--slate-700);
    --accent: var(--amber-500);
    --accent-hover: var(--amber-600);

    --color-green: var(--success-500);
    --color-green-hover: var(--success-600);
    --color-red: var(--danger-500);
    --color-red-hover: var(--danger-600);
    --color-warning: var(--warning-500);

    --color-white: #fff;
    --color-black: #000;
    --color-gray: var(--slate-400);

    /* ---- FlintSoft.Components tokens (--fs-*), kept in sync with the app palette
           for when the library is upgraded to the version exposing them ---- */
    --fs-color-background: var(--background);
    --fs-color-surface: var(--surface);
    --fs-color-surface-text: var(--color-text);
    --fs-color-text: var(--color-text);
    --fs-color-text-muted: var(--color-text-secondary);
    --fs-color-border: var(--border);

    --fs-color-primary: var(--primary);
    --fs-color-primary-foreground: var(--primary-foreground);
    --fs-color-secondary: var(--secondary);

    --fs-color-control-text: var(--color-control-text);
    --fs-color-control-text-inverse: var(--color-control-text-inverse);
    --fs-color-control-filter: var(--color-control-filter);
    --fs-color-disabled: var(--slate-300);

    --fs-color-action: var(--accent);
    --fs-color-success: var(--color-green);
    --fs-color-success-hover: var(--color-green-hover);
    --fs-color-danger: var(--color-red);
    --fs-color-danger-hover: var(--color-red-hover);

    --fs-color-white: var(--color-white);
    --fs-color-black: var(--color-black);

    --fs-color-avatar-bg: var(--slate-400);
    --fs-color-avatar-initials-bg: var(--slate-400);
    --fs-color-avatar-fg: var(--slate-0);
}

.dark-theme {
    --background: var(--slate-900);
    --surface: #1B1E23;
    --menu: #1A1D22;
    --menu-children: #2A2E35;
    --border: #2E333B;

    --color-text: var(--slate-100);
    --color-text-secondary: var(--slate-300);
    --color-control-text: var(--slate-0);
    --color-control-text-inverse: var(--slate-700);
    --color-control-filter: invert(100%);

    --primary: var(--brand-400);
    --primary-hover: var(--brand-300);
    --secondary: var(--slate-200);

    --color-white: #000;
    --color-black: #fff;

    --fs-color-background: var(--background);
    --fs-color-surface: var(--surface);
    --fs-color-surface-text: var(--color-text);
    --fs-color-text: var(--color-text);
    --fs-color-text-muted: var(--color-text-secondary);
    --fs-color-border: var(--border);

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

    --fs-color-control-text: var(--color-control-text);
    --fs-color-control-text-inverse: var(--color-control-text-inverse);
    --fs-color-control-filter: var(--color-control-filter);
    --fs-color-disabled: #4b4b4b;

    --fs-color-white: var(--color-white);
    --fs-color-black: var(--color-black);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    background: var(--background);
    color: var(--color-text);
}

a, .btn-link {
    color: var(--primary);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-green);
}

.invalid {
    outline: 1px solid var(--color-red);
}

.validation-message {
    color: var(--color-red);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-red);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-white);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }