/* ============================================================
   Don Salazar ERP — Design Tokens v7
   Jet Black Sidebar + Green Primary + White Canvas
   ============================================================ */

/* Web Design Guidelines Rule: color-scheme forces native scrollbar + form elements to match theme */
html { color-scheme: light; }

:root {
    /* ── PRIMARY GREEN — Main interactive / CTA ─────────────── */
    --color-primary:         #16A34A;   /* green-600 — main CTA */
    --color-primary-hover:   #15803D;   /* green-700 */
    --color-primary-deep:    #166534;   /* green-800 */
    --color-primary-soft:    #DCFCE7;   /* green-100 */
    --color-primary-subtle:  rgba(22,163,74,0.08);
    --color-primary-border:  rgba(22,163,74,0.30);
    --color-primary-glow:    rgba(22,163,74,0.22);

    /* ── BRAND AMBER — Secondary accent / semantic warm ─────── */
    --color-accent:         #F59E0B;   /* amber — secondary / financial indicators */
    --color-accent-hover:   #D97706;   /* amber dark */
    --color-accent-deep:    #B45309;   /* amber deepest */
    --color-accent-light:   #FEF3C7;   /* amber 100 — tint muy sutil */
    --color-accent-subtle:  rgba(245,158,11,0.08);
    --color-accent-border:  rgba(245,158,11,0.30);
    --color-accent-glow:    rgba(245,158,11,0.22);

    /* ── NAVY — Structural color (sidebar, headings, stripes) ─── */
    --color-navy:           #0047BA;
    --color-navy-hover:     #003494;
    --color-navy-deep:      #001D6E;

    /* ── STATUS ACCENTS — solid vivid, badges/states only ───────── */
    --pastel-lilac:         #7B1FA2;   /* Purple 800 */
    --pastel-lilac-soft:    #9C27B0;   /* Purple 600 */
    --pastel-lilac-text:    #FFFFFF;

    --pastel-cream:         #F59E0B;   /* Amber 500 — matches CTA */
    --pastel-cream-soft:    #D97706;   /* Amber 600 */
    --pastel-cream-text:    #1C0A00;

    --pastel-peach:         #D84315;   /* Deep Orange 800 */
    --pastel-peach-soft:    #BF360C;   /* Deep Orange 900 */
    --pastel-peach-text:    #FFFFFF;

    --pastel-sky:           #0047BA;   /* Navy — badge use */
    --pastel-sky-soft:      #003494;
    --pastel-sky-text:      #FFFFFF;

    --pastel-sage:          #2E7D32;   /* Green 800 */
    --pastel-sage-soft:     #1B5E20;   /* Green 900 */
    --pastel-sage-text:     #FFFFFF;

    --pastel-rose:          #C62828;   /* Red 800 */
    --pastel-rose-soft:     #B71C1C;   /* Red 900 */
    --pastel-rose-text:     #FFFFFF;

    /* ── BACKGROUNDS — editorial canvas ──────────────────────── */
    --color-bg-primary:     #F7F8FA;   /* editorial cool gray canvas */
    --color-bg-secondary:   #FFFFFF;   /* card surfaces */
    --color-bg-tertiary:    #F1F4F8;   /* hover / input bg */
    --color-bg-section:     #E8ECF2;   /* section divider bg */
    --color-bg-alt:         #FAFBFD;   /* near-white cool */

    /* ── SIDEBAR TOKENS — JET BLACK AZABACHE ──────────────────── */
    --color-dark:           #050505;   /* sidebar bg — near-black */
    --color-dark-secondary: #0A0A0A;   /* sidebar inner bg */
    --color-dark-hover:     rgba(255,255,255,0.04);
    --color-dark-border:    rgba(255,255,255,0.04);

    --sidebar-bg:           #050505;   /* azabache premium */
    --sidebar-border:       rgba(255,255,255,0.04);
    --sidebar-hover:        rgba(255,255,255,0.04);
    --sidebar-text:         rgba(255,255,255,0.72);
    --sidebar-text-active:  #FFFFFF;
    --sidebar-active-bg:    linear-gradient(90deg, rgba(16,185,129,0.16), rgba(16,185,129,0.04));
    --sidebar-active-line:  #10B981;   /* emerald indicator */
    --sidebar-section:      rgba(255,255,255,0.28);
    --sidebar-children-bg:  rgba(255,255,255,0.02);
    --sidebar-width:        248px;

    /* ── TOPBAR — floating premium ─────────────────────────────── */
    --topbar-bg:            rgba(255,255,255,0.72);
    --topbar-border:        rgba(15,23,42,0.06);
    --topbar-height:        58px;

    /* ── TEXT — cool neutral hierarchy ───────────────────────── */
    --color-text-primary:   #0F172A;   /* slate 900 */
    --color-text-secondary: #334155;   /* slate 700 */
    --color-text-tertiary:  #64748B;   /* slate 500 */
    --color-text-muted:     #94A3B8;   /* slate 400 */
    --color-text-inverse:   #FFFFFF;

    /* ── BORDERS ─────────────────────────────────────────────── */
    --color-border:         #E2E8F0;   /* slate 200 */
    --color-border-strong:  #CBD5E1;   /* slate 300 */
    --color-border-subtle:  #F1F5F9;   /* slate 100 */
    --color-border-focus:   #F59E0B;   /* amber focus */

    /* ── SEMANTIC STATUS ──────────────────────────────────────── */
    --color-success:        #2E7D32;   /* Green 800 — vivid */
    --color-success-light:  #A5D6A7;   /* Green 200 — vivid bg */
    --color-success-border: #4CAF50;   /* Green 500 */

    --color-warning:        #E65100;   /* Deep Orange 900 — vivid */
    --color-warning-light:  #FFCC80;   /* Orange 200 — vivid bg */
    --color-warning-border: #FF9800;   /* Orange 500 */

    --color-danger:         #C62828;   /* Red 800 — vivid */
    --color-danger-light:   #EF9A9A;   /* Red 200 — vivid bg */
    --color-danger-border:  #F44336;   /* Red 500 */

    --color-info:           #1565C0;   /* Blue 800 — vivid */
    --color-info-light:     #90CAF9;   /* Blue 200 — vivid bg */
    --color-info-border:    #2196F3;   /* Blue 500 */

    /* ── SHADOWS — cool slate base ───────────────────────────── */
    --shadow-xs:    0 1px 3px rgba(15,23,42,0.04);
    --shadow-sm:    0 2px 10px rgba(15,23,42,0.05), 0 1px 3px rgba(15,23,42,0.03);
    --shadow-md:    0 4px 20px rgba(15,23,42,0.07), 0 1px 6px rgba(15,23,42,0.04);
    --shadow-lg:    0 8px 32px rgba(15,23,42,0.09), 0 2px 8px rgba(15,23,42,0.05);
    --shadow-xl:    0 16px 48px rgba(15,23,42,0.11), 0 4px 16px rgba(15,23,42,0.06);
    --shadow-inner: inset 0 1px 3px rgba(15,23,42,0.06);
    --shadow-accent:        0 4px 16px rgba(22,163,74,0.24), 0 1px 4px rgba(22,163,74,0.14);
    --shadow-accent-hover:  0 8px 28px rgba(22,163,74,0.32), 0 2px 8px rgba(22,163,74,0.20);
    --shadow-accent-amber:  0 4px 16px rgba(245,158,11,0.28), 0 1px 4px rgba(245,158,11,0.16);
    --shadow-dropdown:      0 12px 40px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-focus-accent:  0 0 0 4px rgba(22,163,74,0.20);
    /* Semantic named shadows */
    --shadow-card:    0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.08);
    --shadow-panel:   0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.06);
    --shadow-modal:   0 20px 40px -8px rgba(0,0,0,.20), 0 8px 16px -4px rgba(0,0,0,.12);
    --color-accent-mid:     rgba(22,163,74,0.10);

    /* ── TYPOGRAPHY ───────────────────────────────────────────── */
    --font-base: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* ── TEXT SCALE ───────────────────────────────────────────── */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   15px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  36px;
    --text-4xl:  48px;

    /* ── LINE HEIGHTS ─────────────────────────────────────────── */
    --line-xs:   1.2;
    --line-sm:   1.4;
    --line-base: 1.55;
    --line-lg:   1.7;

    /* ── SPACING — más respiración ──────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-8:  48px;
    --space-10: 64px;

    /* ── RADIUS — editorial organic ─────────────────────────── */
    --radius-xs:      2px;
    --radius-sm:      4px;
    --radius-md:      6px;
    --radius-lg:      10px;
    --radius-xl:      14px;
    --radius-2xl:     18px;
    --radius-full:    9999px;
    --radius-card:    24px;   /* cards — organic premium */
    --radius-control: 14px;   /* inputs, buttons */

    /* ── TRANSITIONS ──────────────────────────────────────────── */
    --transition-micro:  80ms  cubic-bezier(.4,0,.2,1);
    --transition-fast:   160ms cubic-bezier(.25,.46,.45,.94);
    --transition-normal: 220ms cubic-bezier(.25,.46,.45,.94);
    --transition-slow:   360ms cubic-bezier(.25,.46,.45,.94);
    --transition-bounce: 280ms cubic-bezier(.34,1.2,.64,1);
    --transition-spring: 380ms cubic-bezier(.34,1.56,.64,1);

    /* ── BUTTON HEIGHT SYSTEM — fintech premium ─────────────────── */
    --btn-h-xs:  30px;
    --btn-h-sm:  36px;
    --btn-h-md:  42px;
    --btn-h-lg:  48px;

    /* ── LAYOUT HEIGHTS ────────────────────────────────────────── */
    --btm-nav-height: 56px;
    --btm-nav-safe:   calc(var(--btm-nav-height) + env(safe-area-inset-bottom, 0px));

    /* ── ICON SCALE — unified sizes for SVG inline ─────────────── */
    --icon-xs:  14px;
    --icon-sm:  16px;
    --icon-md:  18px;
    --icon-lg:  20px;
    --icon-xl:  24px;

    /* ── DRAWER — right slide-over ─────────────────────────────── */
    --drawer-width-sm:  90vw;
    --drawer-width-md:  90vw;
    --drawer-width-lg:  90vw;
    --drawer-z:         70;

    /* ── TIMELINE / SPARK ──────────────────────────────────────── */
    --tl-dot-size:      22px;
    --tl-line-width:    2px;
    --spark-color:      var(--color-accent);
}

/* ── D5: Drawer widths — sensible sizes on desktop ─────────── */
@media (min-width: 768px) {
    :root {
        --drawer-width-sm: 420px;
        --drawer-width-md: 560px;
        --drawer-width-lg: 740px;
    }
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — DISABLED (light-only by user request)
   ════════════════════════════════════════════════════════════ */