/* ════════════════════════════════════════════════════════════
   ELYTHOS DESIGN TOKENS
   ════════════════════════════════════════════════════════════
   Single source of truth for the entire app.
   Import ONCE in your root layout / App.razor / index.html.

   Maps 1:1 to your MudBlazor PaletteLight where applicable.
   
   Usage:  color: var(--ely-text-primary);
           background: var(--ely-primary);
   ════════════════════════════════════════════════════════════ */

:root {

    /* ═══════════════ Brand ═══════════════ */
    --ely-primary:            #002148;   /* PaletteLight.Primary */
    --ely-secondary:          #b0456c;   /* PaletteLight.Secondary */
    --ely-tertiary:           #2a7ab5;   /* PaletteLight.Tertiary */

    --ely-primary-muted: #1B3158;  /* primary lightened ~15% */
    
    /* ═══════════════ Semantic ═══════════════ */
    --ely-info:               #1565C0;   /* PaletteLight.Info */
    --ely-success:            #2e7d32;   /* PaletteLight.Success */
    --ely-warning:            #ef8c00;   /* PaletteLight.Warning */
    --ely-error:              #c62828;   /* PaletteLight.Error */

    /* ═══════════════ Surfaces ═══════════════ */
    --ely-surface:            #FFFFFF;   /* PaletteLight.Surface */
    --ely-surface-bg:         #F3F4F8;   /* PaletteLight.Background */
    --ely-surface-hover:      #EEEDF2;
    --ely-surface-card:       #FFFFFF;

    /* ═══════════════ Borders ═══════════════ */
    --ely-border:             #ddd8db;   /* PaletteLight.LinesDefault */
    --ely-border-light:       #EEEDF2;

    /* ═══════════════ Text ═══════════════ */
    --ely-text-primary:       #1a1a2e;   /* PaletteLight.TextPrimary */
    --ely-text-secondary:     #5c5a6e;   /* PaletteLight.TextSecondary */
    --ely-text-tertiary:      #94899e;

    /* ═══════════════ Appbar / Drawer ═══════════════ */
    --ely-appbar-bg:          #002148;   /* PaletteLight.AppbarBackground */
    --ely-appbar-text:        #FFFFFF;   /* PaletteLight.AppbarText */
    --ely-drawer-bg:          #f4f1f2;   /* PaletteLight.DrawerBackground */
    --ely-drawer-text:        #3b2a33;   /* PaletteLight.DrawerText */

    /* ═══════════════ CTA ═══════════════ */
    --ely-cta:                #b0456c;   /* = secondary, rose accent */
    --ely-cta-hover:          #933858;

    /* ═══════════════ Semantic Soft Backgrounds ═══════════════ */
    --ely-primary-soft:       #E8EEF5;
    --ely-secondary-soft:     #F9EDF1;
    --ely-tertiary-soft:      #E9F2FA;
    --ely-info-soft:          #E3F0FC;
    --ely-success-soft:       #E6F4E7;
    --ely-warning-soft:       #FFF4E0;
    --ely-error-soft:         #FDEAEA;

    /* ═══════════════ Card Icon Colors ═══════════════
       Used for the 30×30 colored icon squares
       in ATDCard4 headers. Each maps to a
       IconColor="blue" etc. parameter.
       ═══════════════════════════════════════════════ */
    --ely-icon-blue:          var(--ely-tertiary);
    --ely-icon-purple:        #7C3AED;
    --ely-icon-green:         var(--ely-success);
    --ely-icon-amber:         var(--ely-warning);
    --ely-icon-rose:          var(--ely-secondary);
    --ely-icon-navy:          var(--ely-primary);
    --ely-icon-slate:         var(--ely-text-secondary);
    --ely-icon-teal:          #0f8a7e;
    --ely-icon-red:           var(--ely-error);

    /* ── Icon soft backgrounds ── */
    --ely-icon-blue-soft:     var(--ely-tertiary-soft);
    --ely-icon-purple-soft:   #F3E8FF;
    --ely-icon-green-soft:    var(--ely-success-soft);
    --ely-icon-amber-soft:    var(--ely-warning-soft);
    --ely-icon-rose-soft:     var(--ely-secondary-soft);
    --ely-icon-navy-soft:     var(--ely-primary-soft);
    --ely-icon-slate-soft:    var(--ely-surface-hover);
    --ely-icon-teal-soft:     #E6F5F3;
    --ely-icon-red-soft:      var(--ely-error-soft);

    /* ═══════════════ Radius ═══════════════ */
    --ely-radius-xs:          4px;
    --ely-radius-sm:          8px;
    --ely-radius-md:          10px;
    --ely-radius-lg:          14px;
    --ely-radius-xl:          16px;
    --ely-radius-chip:        6px;
    --ely-radius-pill:        20px;

    /* ═══════════════ Shadows ═══════════════ */
    --ely-shadow-sm:          0 1px 3px rgba(0, 33, 72, 0.04);
    --ely-shadow-md:          0 4px 12px rgba(0, 33, 72, 0.08);
    --ely-shadow-lg:          0 8px 32px rgba(0, 33, 72, 0.12);

    /* ═══════════════ Animation ═══════════════ */
    --ely-ease-bounce:        cubic-bezier(0.34, 1.56, 0.64, 1);
    --ely-ease-smooth:        cubic-bezier(0.4, 0, 0.2, 1);
    --ely-duration-fast:      0.15s;
    --ely-duration-normal:    0.25s;

    /* ═══════════════ Typography ═══════════════ */
    --ely-font:               'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}






/* ════════════════════════════════════════════════
   Elythos Buttons — unified system
   ════════════════════════════════════════════════
   .ely-btn                        → default bordered
   .ely-btn.emphasis               → rose CTA filled
   .ely-btn.square                 → icon-only (38×38)
   .ely-btn.sm                     → compact (34×34)
   .ely-btn.sm.square              → compact icon-only
   .ely-btn.ghost                  → no border, transparent
   .ely-btn.dashed                 → dashed border (add buttons)
   
   Context variants (inherit base):
   .ely-btn.on-dark                → for navy/hero backgrounds
   ════════════════════════════════════════════════ */

/* ── Base ── */
.ely-btn {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--ely-radius-md);
    border: 1.5px solid var(--ely-border);
    background: var(--ely-surface-card);
    color: var(--ely-text-secondary) !important;
    font-family: var(--ely-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: none !important;
    cursor: pointer;
    transition: all var(--ely-duration-fast) var(--ely-ease-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.ely-btn:hover {
    border-color: var(--ely-primary);
    color: var(--ely-primary) !important;
    background: var(--ely-primary-soft);
}

.ely-btn:active {
    transform: scale(0.96);
}

/* ── Sizes ── */
.ely-btn.sm {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
}

.ely-btn.square {
    width: 38px;
    padding: 0;
}

.ely-btn.sm.square {
    width: 34px;
    height: 34px;
}

/* ── Emphasis (CTA) ── */
.ely-btn.emphasis {
    background: var(--ely-cta);
    border-color: var(--ely-cta);
    color: white !important;
    box-shadow: 0 2px 8px rgba(176, 69, 108, 0.2);
}

.ely-btn.emphasis:hover {
    background: var(--ely-cta-hover);
    border-color: var(--ely-cta-hover);
    color: white !important;
    box-shadow: 0 4px 14px rgba(176, 69, 108, 0.25);
}

/* ── Ghost (no border) ── */
.ely-btn.ghost {
    border-color: transparent;
    background: none;
}

.ely-btn.ghost:hover {
    background: var(--ely-surface-hover);
    border-color: transparent;
}

/* ── Dashed (add/create buttons) ── */
.ely-btn.dashed {
    border: 1.5px dashed var(--ely-border);
    background: none;
    color: var(--ely-tertiary) !important;
}

.ely-btn.dashed:hover {
    border-color: var(--ely-tertiary);
    background: var(--ely-tertiary-soft);
    color: var(--ely-tertiary) !important;
}

/* ── On Dark (navy/hero backgrounds) ── */
.ely-btn.on-dark {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7) !important;
}

.ely-btn.on-dark:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white !important;
    border-color: rgba(255, 255, 255, 0.25);
}

.ely-btn.on-dark.emphasis {
    background: var(--ely-cta);
    border-color: var(--ely-cta);
    color: white !important;
}

/* ── Disabled ── */
.ely-btn:disabled,
.ely-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── MudBlazor icon sizing ── */
.ely-btn .mud-icon-root {
    font-size: 17px !important;
}

.ely-btn.sm .mud-icon-root {
    font-size: 15px !important;
}