/* ══════════════════════════════════════════════════
   LeanLoops Design Tokens
   ──────────────────────────────────────────────────
   This file MUST be loaded BEFORE MudBlazor.min.css.
   LeanLoopsTheme consumes these via var(--ll-*).
   See openspec/changes/migrate-ui-to-mudblazor/.
   ══════════════════════════════════════════════════ */

:root {
    /* ── Color: Primary scale (mining-industrial blue) ── */
    --ll-color-primary-50:  #f0f6fb;
    --ll-color-primary-100: #d9e8f4;
    --ll-color-primary-200: #b3d1e9;
    --ll-color-primary-300: #80b0d6;
    --ll-color-primary-400: #4d8ec1;
    --ll-color-primary-500: #2C5F7C;
    --ll-color-primary-600: #1f4961;
    --ll-color-primary-700: #163749;
    --ll-color-primary-800: #102a37;
    --ll-color-primary-900: #0a1c25;
    --ll-color-primary-950: #050e13;

    /* ── Color: Secondary scale (industrial slate) ── */
    --ll-color-secondary-50:  #f4f7fa;
    --ll-color-secondary-100: #e3eaf1;
    --ll-color-secondary-200: #c5d3df;
    --ll-color-secondary-300: #9fb3c4;
    --ll-color-secondary-400: #7691a8;
    --ll-color-secondary-500: #4f6e87;
    --ll-color-secondary-600: #3d566a;
    --ll-color-secondary-700: #2e4252;
    --ll-color-secondary-800: #232f3a;
    --ll-color-secondary-900: #161e25;
    --ll-color-secondary-950: #0b0f13;

    /* ── Color: Tertiary scale (accent — risk-amber) ── */
    --ll-color-tertiary-50:  #fff8e6;
    --ll-color-tertiary-100: #ffeec0;
    --ll-color-tertiary-200: #ffdc80;
    --ll-color-tertiary-300: #ffc94d;
    --ll-color-tertiary-400: #ffb71a;
    --ll-color-tertiary-500: #e6a200;
    --ll-color-tertiary-600: #b37e00;
    --ll-color-tertiary-700: #805a00;
    --ll-color-tertiary-800: #4d3600;
    --ll-color-tertiary-900: #261b00;
    --ll-color-tertiary-950: #130d00;

    /* ── Color: Neutral scale ── */
    --ll-color-neutral-0:   #ffffff;
    --ll-color-neutral-50:  #fafbfc;
    --ll-color-neutral-100: #f4f6f8;
    --ll-color-neutral-200: #e8ecf0;
    --ll-color-neutral-300: #d1d8e0;
    --ll-color-neutral-400: #a8b3c0;
    --ll-color-neutral-500: #6b7a8d;
    --ll-color-neutral-600: #4a5666;
    --ll-color-neutral-700: #2f3947;
    --ll-color-neutral-800: #1a2230;
    --ll-color-neutral-900: #0f1923;
    --ll-color-neutral-950: #060a10;

    /* ── Color: Semantic — Surface ── */
    --ll-color-surface-base:    var(--ll-color-neutral-50);
    --ll-color-surface-raised:  var(--ll-color-neutral-0);
    --ll-color-surface-overlay: var(--ll-color-neutral-0);
    --ll-color-surface-sunken:  var(--ll-color-neutral-100);
    --ll-color-surface-border:  var(--ll-color-neutral-200);

    /* ── Color: Semantic — Text ── */
    --ll-color-text-primary:   var(--ll-color-neutral-800);
    --ll-color-text-secondary: var(--ll-color-neutral-600);
    --ll-color-text-tertiary:  var(--ll-color-neutral-500);
    --ll-color-text-inverse:   var(--ll-color-neutral-0);
    --ll-color-text-on-brand:  var(--ll-color-neutral-0);
    --ll-color-text-disabled:  var(--ll-color-neutral-400);

    /* ── Color: Semantic — State ── */
    --ll-color-state-info-bg:        #e0f0fa;
    --ll-color-state-info-fg:        #0a5d8f;
    --ll-color-state-info:           #1a82c7;
    --ll-color-state-success-bg:    #e3f5e7;
    --ll-color-state-success-fg:    #1e6b32;
    --ll-color-state-success:       #5dbf74;
    --ll-color-state-warning-bg:    #fff4d6;
    --ll-color-state-warning-fg:    #7a5400;
    --ll-color-state-warning:       #e6a200;
    --ll-color-state-danger-bg:     #fce5e5;
    --ll-color-state-danger-fg:     #8a1c1c;
    --ll-color-state-danger:        #d83a3a;

    /* ── Color: CGR Cajas ── */
    --ll-color-caja-1: #f7066b; /* Mapa de Procesos */
    --ll-color-caja-2: #5dbf74; /* Matriz de Riesgos */
    --ll-color-caja-3: #e6c54f; /* Planes de Mitigacion */
    --ll-color-caja-4: #42a5f5; /* Procedimientos */
    --ll-color-caja-5: #ff9800; /* Verificaciones */
    --ll-color-caja-6: #e53935; /* Incidentes */
    --ll-color-caja-knowledge: #7c4dff; /* Transversal: Conocimiento */

    /* ── Color: Risk severity (matrix cells) ── */
    --ll-color-risk-low:       #5dbf74;
    --ll-color-risk-moderate:  #ffd54f;
    --ll-color-risk-high:      #ff9800;
    --ll-color-risk-very-high: #d83a3a;
    --ll-color-risk-extreme:   #8a1c1c;

    /* ── Typography: Families ── */
    --ll-font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ll-font-body:    "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ll-font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* ── Typography: Scale ── */
    --ll-text-xs:   11px;
    --ll-text-sm:   12px;
    --ll-text-base: 14px;
    --ll-text-md:   15px;
    --ll-text-lg:   16px;
    --ll-text-xl:   18px;
    --ll-text-2xl:  22px;
    --ll-text-3xl:  28px;
    --ll-text-4xl:  36px;

    /* ── Typography: Weights ── */
    --ll-weight-regular:  400;
    --ll-weight-medium:   500;
    --ll-weight-semibold: 600;
    --ll-weight-bold:     700;

    /* ── Typography: Line heights ── */
    --ll-leading-tight:  1.2;
    --ll-leading-snug:   1.35;
    --ll-leading-normal: 1.5;
    --ll-leading-relaxed: 1.65;

    /* ── Spacing scale (4px base) ── */
    --ll-space-0:   0px;
    --ll-space-1:   4px;
    --ll-space-2:   8px;
    --ll-space-3:   12px;
    --ll-space-4:   16px;
    --ll-space-5:   20px;
    --ll-space-6:   24px;
    --ll-space-8:   32px;
    --ll-space-10:  40px;
    --ll-space-12:  48px;
    --ll-space-16:  64px;
    --ll-space-20:  80px;
    --ll-space-24:  96px;

    /* ── Radii ── */
    --ll-radius-xs:   2px;
    --ll-radius-sm:   4px;
    --ll-radius-md:   8px;
    --ll-radius-lg:   12px;
    --ll-radius-xl:   16px;
    --ll-radius-2xl:  24px;
    --ll-radius-full: 9999px;

    /* ── Shadows / elevation ── */
    --ll-shadow-none:  none;
    --ll-shadow-xs:    0 1px 1px rgba(15, 25, 35, 0.04);
    --ll-shadow-sm:    0 1px 3px rgba(15, 25, 35, 0.06), 0 1px 2px rgba(15, 25, 35, 0.04);
    --ll-shadow-md:    0 4px 8px rgba(15, 25, 35, 0.08), 0 2px 4px rgba(15, 25, 35, 0.04);
    --ll-shadow-lg:    0 12px 20px rgba(15, 25, 35, 0.10), 0 4px 8px rgba(15, 25, 35, 0.06);
    --ll-shadow-xl:    0 24px 40px rgba(15, 25, 35, 0.14), 0 8px 16px rgba(15, 25, 35, 0.08);
    --ll-shadow-focus: 0 0 0 3px rgba(44, 95, 124, 0.35);

    /* ── Motion: Durations ── */
    --ll-motion-instant: 0ms;
    --ll-motion-fast:    150ms;
    --ll-motion-normal:  240ms;
    --ll-motion-slow:    400ms;
    --ll-motion-slower:  600ms;

    /* ── Motion: Easings ── */
    --ll-ease-linear: linear;
    --ll-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ll-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --ll-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ll-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --ll-z-base:    0;
    --ll-z-raised:  10;
    --ll-z-drawer:  100;
    --ll-z-overlay: 200;
    --ll-z-modal:   300;
    --ll-z-toast:   400;
    --ll-z-tooltip: 500;
}

/* ══════════════════════════════════════════════════
   Dark mode — activate with <html data-theme="dark">.
   Only semantic tokens flip; raw scales stay the same.
   ══════════════════════════════════════════════════ */
[data-theme="dark"] {
    --ll-color-surface-base:    var(--ll-color-neutral-900);
    --ll-color-surface-raised:  var(--ll-color-neutral-800);
    --ll-color-surface-overlay: var(--ll-color-neutral-800);
    --ll-color-surface-sunken:  var(--ll-color-neutral-950);
    --ll-color-surface-border:  var(--ll-color-neutral-700);

    --ll-color-text-primary:   var(--ll-color-neutral-50);
    --ll-color-text-secondary: var(--ll-color-neutral-200);
    --ll-color-text-tertiary:  var(--ll-color-neutral-400);
    --ll-color-text-inverse:   var(--ll-color-neutral-900);
    --ll-color-text-on-brand:  var(--ll-color-neutral-0);
    --ll-color-text-disabled:  var(--ll-color-neutral-600);

    --ll-color-state-info-bg:    #0a2a3d;
    --ll-color-state-info-fg:    #80c0e0;
    --ll-color-state-success-bg: #0e2e15;
    --ll-color-state-success-fg: #8fdda1;
    --ll-color-state-warning-bg: #3a2a00;
    --ll-color-state-warning-fg: #ffd76a;
    --ll-color-state-danger-bg:  #3a1010;
    --ll-color-state-danger-fg:  #ff8585;

    --ll-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30);
    --ll-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --ll-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
    --ll-shadow-lg: 0 12px 20px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.35);
    --ll-shadow-xl: 0 24px 40px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.40);
    --ll-shadow-focus: 0 0 0 3px rgba(128, 176, 214, 0.45);
}

/* ══════════════════════════════════════════════════
   Reduced motion — disable non-essential animation.
   ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ll-motion-fast:   0ms;
        --ll-motion-normal: 0ms;
        --ll-motion-slow:   0ms;
        --ll-motion-slower: 0ms;
    }
}