:root {

    --gunsmoke-50: #f6f6f6;
    --gunsmoke-100: #e7e7e7;
    --gunsmoke-200: #d1d1d1;
    --gunsmoke-300: #b0b0b0;
    --gunsmoke-400: #8a8a8a;
    --gunsmoke-500: #6d6d6d;
    --gunsmoke-600: #5d5d5d;
    --gunsmoke-700: #4f4f4f;
    --gunsmoke-800: #454545;
    --gunsmoke-900: #3d3d3d;
    --gunsmoke-950: #262626;

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;

    --boston-blue-50: #eff9fc;
    --boston-blue-100: #d8eef5;
    --boston-blue-200: #b5dcec;
    --boston-blue-300: #82c3de;
    --boston-blue-400: #47a0c9;
    --boston-blue-500: #2f8ebb;
    --boston-blue-600: #276b93;
    --boston-blue-700: #265878;
    --boston-blue-800: #274a63;
    --boston-blue-900: #243f55;
    --boston-blue-950: #132739;

    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;


    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --amber-900: #78350f;
    --amber-950: #451a03;


    /*  */
    --color-surface-secondary: var(--gray-300);
    --color-surface-tertiary: var(--gray-100);
    --color-surface-soft: var(--gray-50);
    --color-surface-active: var(--blue-600);
    --color-surface-active-hover: var(--blue-700);
    --color-surface-disabled: var(--gunsmoke-200);
    --color-surface-active-disabled: var(--blue-950);

    --color-panel-base: var(--gunsmoke-50);
    --color-panel-base-2: var(--gunsmoke-100);
    --color-panel-base-3: var(--gunsmoke-200);
    --color-panel-base-4: var(--gunsmoke-300);

    --color-panel-active: var(--boston-blue-50);
    --color-panel-active-2: var(--boston-blue-100);

    --color-border-secondary: var(--gray-200);
    --color-border-tertiary: var(--gray-300);
    --color-border-active: var(--blue-500);
    --color-border-disabled: var(--gray-400);

    --color-text-tertiary: var(--gray-400);
    --color-text-secondary: var(--gray-500);
    --color-text-secondaty-hover: var(--gray-600);
    --color-text-active: var(--blue-600);
    --color-text-active-hover: var(--blue-700);
    --color-text-title: var(--gunsmoke-950);
    --color-text-subtitle: var(--gunsmoke-900);
    --color-text-disabled: var(--gunsmoke-500);
    --color-text-active-inverse: var(--gray-50);
    --color-text-active-inverse-hover: var(--gray-100);
    --color-text-soft: var(--gray-200);

    --color-text-warning: var(--amber-600);
    --color-border-warning: var(--amber-400);
    --color-surface-warning: var(--amber-50);
}

[x-cloak] {
    display: none !important;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.container {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-height: 100vh;
    position: relative;
    width: 100%;
    padding: 0px;
}

.sr-only {
    display: none;
    visibility: hidden;
}