/*
 * Pradco.Toolkit.Blazor.Maps — Optional Default Design Tokens
 *
 * This file provides a complete design token system (CSS custom properties) that can be
 * imported to get out-of-the-box dark-theme styling for all map components.
 *
 * Consuming apps have two options:
 * 1. Import this file to use the default tokens (recommended for quick start)
 * 2. Define their own :root CSS variables (for full customization)
 *
 * Usage in your app's _Host.cshtml or App.razor:
 *   <link rel="stylesheet" href="_content/Pradco.Toolkit.Blazor.Maps/css/defaults.css" />
 *
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap');

:root {
    /* ── Elevation / Surface ── */
    --surface-0: #121212;
    --surface-1: #181818;
    --surface-2: #1f1f1f;
    --surface-3: #272727;
    --surface-4: #2a2a2a;
    --surface-5: #2e2e2e;

    /* ── Shadows ── */
    --shadow-2: 0 2px 12px rgba(0, 0, 0, 0.25);

    /* ── Map pin colors (PredefinedMapColors) ── */
    --map-color-default: #FF453A;
    --map-color-red: #FF453A;
    --map-color-blue: #0A84FF;
    --map-color-green: #68C613;
    --map-color-brown: #89512A;
    --map-color-grey: #9DA6B3;
    --map-color-purple: #D735FF;
    --map-color-orange: #F08200;
    --map-color-yellow: #FFD14E;
    --map-color-teal: #00D4D4;

    /* ── White opacity shades ── */
    --white-96: #f6f6f6;
    --white-85: #d9d9d9;
    --white-64: #aaaaaa;
    --white-64a: #FFFFFFA3;       /* white 64% transparent — for text on dark surfaces */
    --white-38: #747474;
    --white-24: #515151;
    --white-32: #272727;
    --white-12: #3a3a3a;

    /* ── Interaction states (transparent overlays) ── */
    --state-hover: #FFFFFF0A;        /* white ~4% — subtle hover highlight  */
    --state-pressed: #FFFFFF14;      /* white ~8% — pressed / active press  */
    --state-active: #FFFFFF1A;       /* white ~10% — selected / toggled on  */
    --state-active-hover: #FFFFFF26; /* white ~15% — hover over active item */

    /* ── Disabled states ── */
    --disabled-filled-bg: #363636;
    --disabled-filled-color: #676767;
    --disabled: #555555;

    /* ── Primary ── */
    --pri-0: #000000;
    --pri-10: #273913;
    --pri-20: #3b561e;
    --pri-30: #476524;
    --pri-40: #52752c;
    --pri-50: #5c8233;
    --pri-60: #71934f;
    --pri-70: #86a46a;
    --pri-80: #a6bc93;
    --pri-90: #c8d6bc;
    --pri-95: #e8eee4;
    --pri-99: #fafaf9;
    --pri-100: #ffffff;

    /* ── Secondary ── */
    --sec-0: #000000;
    --sec-10: #ce6929;
    --sec-20: #f87f31;
    --sec-30: #fc9a36;
    --sec-40: #fdaa3a;
    --sec-50: #ffbd3e;
    --sec-60: #ffc944;
    --sec-70: #ffd14e;
    --sec-80: #ffdb67;
    --sec-90: #ffe491;
    --sec-95: #ffeebb;
    --sec-99: #fff9e4;
    --sec-100: #ffffff;

    /* ── Tertiary ── */
    --ter-0: #000000;
    --ter-10: #2c2d2b;
    --ter-20: #4f514d;
    --ter-30: #72756f;
    --ter-40: #959991;
    --ter-50: #b8bdb3;
    --ter-60: #dbe1d5;
    --ter-70: #e1e6dc;
    --ter-80: #e7ebe2;
    --ter-90: #ecefe9;
    --ter-95: #f2f4f0;
    --ter-99: #f8f9f7;
    --ter-100: #ffffff;

    /* ── Error ── */
    --err-0: #000000;
    --err-5: #2f1916;
    --err-10: #5c1b12;
    --err-20: #852819;
    --err-30: #ad3421;
    --err-40: #d64029;
    --err-50: #ff4c31;
    --err-60: #ff6952;
    --err-70: #ff8573;
    --err-80: #ffa294;
    --err-90: #ffbfb5;
    --err-95: #ffdbd6;
    --err-99: #fff8f7;
    --err-100: #ffffff;

    /* ── Neutral ── */
    --neu-0: #000000;
    --neu-10: #2a2a2a;
    --neu-20: #3d3d3d;
    --neu-30: #505050;
    --neu-40: #626262;
    --neu-50: #757575;
    --neu-60: #8b8b8b;
    --neu-70: #a1a1a1;
    --neu-80: #b7b7b7;
    --neu-90: #cdcdcd;
    --neu-95: #e3e3e3;
    --neu-99: #f9f9f9;
    --neu-100: #ffffff;

    /* ── Neutral Variant ── */
    --neuv-0: #000000;
    --neuv-10: #121210;
    --neuv-20: #252723;
    --neuv-30: #393b35;
    --neuv-40: #4d5048;
    --neuv-50: #61645a;
    --neuv-60: #8c9086;
    --neuv-70: #a4a79f;
    --neuv-80: #bbbdb7;
    --neuv-90: #d3d4d0;
    --neuv-95: #eaebe9;
    --neuv-99: #fafaf9;
    --neuv-100: #ffffff;

    /* ── Dark Blue ── */
    --dblu-0: #000000;
    --dblu-5: #152533;
    --dblu-10: #012b5c;
    --dblu-20: #0843b2;
    --dblu-30: #0263d1;
    --dblu-40: #0074e3;
    --dblu-50: #0087f7;
    --dblu-60: #0095ff;
    --dblu-70: #2da5ff;
    --dblu-80: #5ab5ff;
    --dblu-90: #8ccaff;
    --dblu-95: #badeff;
    --dblu-99: #e2f2ff;
    --dblu-100: #ffffff;
}