/* ==========================================================================
   AXIS design tokens
   Brand: Altarius ETI — deep teal #002C36 + lime #B4FA32.
   Palette colours come from MudBlazor (Theme/AxisTheme.cs) through the
   --mud-palette-* variables, so light/dark mode switch automatically.
   Only values MudBlazor does not expose are defined here.
   ========================================================================== */

:root {
    /* Brand constants (identical in both modes) */
    --axis-brand-teal: #002C36;
    --axis-brand-teal-700: #0E4552;
    --axis-brand-teal-600: #1E6B78;
    --axis-brand-lime: #B4FA32;

    /* Semantic aliases */
    --axis-bg: var(--mud-palette-background);
    --axis-surface: var(--mud-palette-surface);
    --axis-surface-muted: var(--mud-palette-background-gray);
    --axis-text: var(--mud-palette-text-primary);
    --axis-text-muted: var(--mud-palette-text-secondary);
    --axis-border: var(--mud-palette-lines-default);
    --axis-border-strong: var(--mud-palette-lines-inputs);
    --axis-primary: var(--mud-palette-primary);
    --axis-focus-ring: 0 0 0 3px rgba(30, 107, 120, 0.35);
    /* Borde de un campo enfocado: teal medio, no el casi-negro del primario */
    --axis-input-focus: #1E6B78;

    /* Typography */
    --axis-font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    /* Una sola tipografía en toda la app: lo que antes era monoespaciado usa Inter con cifras tabulares */
    --axis-font-mono: var(--axis-font);

    /* Spacing scale (4px base) */
    --axis-space-1: 4px;
    --axis-space-2: 8px;
    --axis-space-3: 12px;
    --axis-space-4: 16px;
    --axis-space-5: 20px;
    --axis-space-6: 24px;
    --axis-space-8: 32px;

    /* Radius */
    --axis-radius-sm: 4px;
    --axis-radius: 6px;
    --axis-radius-lg: 10px;

    /* Motion */
    --axis-ease: cubic-bezier(0.2, 0, 0, 1);
    --axis-duration: 160ms;

    /* Layers */
    --axis-z-sticky: 10;
    --axis-z-appbar: 1300;

    /* Account hierarchy scale (catalog / breakdown trees) */
    --axis-level-0-bg: #002C36;
    --axis-level-0-fg: #FFFFFF;
    --axis-level-1-bg: #0E4552;
    --axis-level-1-fg: #FFFFFF;
    --axis-level-2-bg: #1E6B78;
    --axis-level-2-fg: #FFFFFF;
    --axis-level-3-bg: #3F8793;
    --axis-level-3-fg: #FFFFFF;
    --axis-level-4-bg: #8DBAC2;
    --axis-level-4-fg: #0F1E23;
    --axis-level-5-bg: #BCD7DC;
    --axis-level-5-fg: #0F1E23;
    --axis-level-6-bg: #DCEAED;
    --axis-level-6-fg: #0F1E23;
    --axis-level-7-bg: #EDF4F5;
    --axis-level-7-fg: #0F1E23;
    --axis-level-8-bg: #F6FAFA;
    --axis-level-8-fg: #0F1E23;

    /* Status tints (backgrounds for rows, badges) */
    --axis-tint-success: rgba(30, 122, 70, 0.10);
    --axis-tint-warning: rgba(179, 92, 0, 0.10);
    --axis-tint-error: rgba(180, 35, 24, 0.08);
    --axis-tint-info: rgba(29, 95, 168, 0.08);
    --axis-tint-brand: rgba(0, 44, 54, 0.06);
}

/* Dark-mode overrides. MainLayout adds .axis-dark to the root wrapper that
   also contains the MudBlazor dialog/popover providers. */
.axis-dark {
    --axis-focus-ring: 0 0 0 3px rgba(180, 250, 50, 0.35);
    --axis-input-focus: rgba(180, 250, 50, 0.7);

    --axis-level-0-bg: #0E4552;
    --axis-level-1-bg: #155563;
    --axis-level-2-bg: #1E6B78;
    --axis-level-3-bg: #2A5E68;
    --axis-level-3-fg: #E6EDEF;
    --axis-level-4-bg: #214A53;
    --axis-level-4-fg: #E6EDEF;
    --axis-level-5-bg: #1A3C44;
    --axis-level-5-fg: #E6EDEF;
    --axis-level-6-bg: #163238;
    --axis-level-6-fg: #E6EDEF;
    --axis-level-7-bg: #132A30;
    --axis-level-7-fg: #E6EDEF;
    --axis-level-8-bg: #102328;
    --axis-level-8-fg: #E6EDEF;

    --axis-tint-success: rgba(76, 195, 138, 0.14);
    --axis-tint-warning: rgba(240, 163, 58, 0.14);
    --axis-tint-error: rgba(242, 104, 92, 0.14);
    --axis-tint-info: rgba(91, 163, 240, 0.14);
    --axis-tint-brand: rgba(180, 250, 50, 0.08);
}