/* ============================================================================
   Evolução Clínica — Design Tokens v2 (Medical Modernism)
   Dark-rich clinical SaaS. Cyan #0891B2 + health emerald #059669.
   Context accent overridable via --context (per-app identity).
   ============================================================================ */

:root {
    /* ── SURFACES: rich dark with temperature ─────────────────────────── */
    --bg-void:      #050814;
    --bg-base:      #0a0e1a;
    --bg-surface:   #121829;
    --bg-raised:    #1a2236;
    --bg-peak:      #252d42;

    /* Glass layers — real frosted blur context */
    --glass-90:     rgba(18, 24, 41, 0.90);
    --glass-80:     rgba(18, 24, 41, 0.82);
    --glass-60:     rgba(18, 24, 41, 0.60);
    --glass-40:     rgba(18, 24, 41, 0.42);

    /* ── BRAND: clinical cyan + health emerald ────────────────────────── */
    --accent:        #0891B2;
    --accent-lift:   #0EA5C1;
    --accent-press:  #0E7490;
    --accent-on:     #ffffff;
    --accent-dim:    rgba(8, 145, 178, 0.15);
    --accent-border: rgba(8, 145, 178, 0.42);
    --accent-glow:   rgba(8, 145, 178, 0.35);
    --accent-sheen:  linear-gradient(135deg, #0891B2 0%, #059669 100%);
    --accent-mesh:
        radial-gradient(circle at 25% 10%, rgba(8, 145, 178, 0.14), transparent 50%),
        radial-gradient(circle at 75% 85%, rgba(5, 150, 105, 0.10), transparent 55%);

    --health:        #059669;
    --health-lift:   #10B981;
    --health-dim:    rgba(5, 150, 105, 0.14);

    /* ── Context flavor (override per app via body class or data-attr) ── */
    --context:       var(--accent);
    --context-lift:  var(--accent-lift);
    --context-dim:   var(--accent-dim);
    --context-glow:  var(--accent-glow);
    --context-on:    var(--accent-on);
    --context-sheen: var(--accent-sheen);

    /* ── TRIAGE: semantic clinical states (NOT chrome colors) ─────────── */
    --triage-red:     #DC2626;
    --triage-red-soft: #F87171;
    --triage-red-bg:  rgba(220, 38, 38, 0.14);
    --triage-red-br:  rgba(220, 38, 38, 0.42);

    --triage-amber:     #D97706;
    --triage-amber-soft: #FBBF24;
    --triage-amber-bg:  rgba(217, 119, 6, 0.14);
    --triage-amber-br:  rgba(217, 119, 6, 0.42);

    --triage-blue:     #2563EB;
    --triage-blue-soft: #60A5FA;
    --triage-blue-bg:  rgba(37, 99, 235, 0.14);
    --triage-blue-br:  rgba(37, 99, 235, 0.42);

    --triage-green:     #059669;
    --triage-green-soft: #34D399;
    --triage-green-bg:  rgba(5, 150, 105, 0.14);
    --triage-green-br:  rgba(5, 150, 105, 0.42);

    /* ── SEMANTIC (tied to triage palette) ────────────────────────────── */
    --danger:   var(--triage-red);
    --warning:  var(--triage-amber);
    --info:     var(--triage-blue);
    --success:  var(--triage-green);

    /* ── TEXT: warm whites, careful gradation ─────────────────────────── */
    --text:      #F3F4F6;
    --text-2:    #C7CDD8;
    --text-3:    #8B95A9;
    --text-4:    #5C6880;
    --text-disabled: #3F4656;

    /* ── BORDERS / DIVIDERS ───────────────────────────────────────────── */
    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --divider:       rgba(255, 255, 255, 0.06);

    /* ── TYPOGRAPHY: editorial display + clean body ───────────────────── */
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Syne', var(--font-body);
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --fs-xs:   11px;
    --fs-sm:   13px;
    --fs-base: 15px;
    --fs-md:   17px;
    --fs-lg:   21px;
    --fs-xl:   28px;
    --fs-2xl:  36px;
    --fs-3xl:  48px;
    --fs-4xl:  64px;

    --lh-tight:  1.05;
    --lh-snug:   1.2;
    --lh-base:   1.55;
    --lh-loose:  1.75;

    --ls-display: -0.028em;
    --ls-tight:   -0.015em;
    --ls-normal:  0;
    --ls-label:   0.10em;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

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

    /* ── RADIUS ───────────────────────────────────────────────────────── */
    --r-1:    4px;
    --r-2:    8px;
    --r-3:    12px;
    --r-4:    16px;
    --r-5:    20px;
    --r-6:    28px;
    --r-full: 9999px;

    /* ── ELEVATION (rich layered) ─────────────────────────────────────── */
    --elev-1: 0 1px 2px rgba(0,0,0,0.28), 0 1px 1px rgba(0,0,0,0.14);
    --elev-2: 0 2px 8px rgba(0,0,0,0.38), 0 1px 2px rgba(0,0,0,0.20);
    --elev-3: 0 12px 32px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.26);
    --elev-4: 0 24px 56px rgba(0,0,0,0.60), 0 8px 16px rgba(0,0,0,0.32);
    --elev-accent: 0 10px 28px var(--accent-glow), 0 2px 4px rgba(0,0,0,0.3);

    /* ── MOTION ───────────────────────────────────────────────────────── */
    --dur-fast:   140ms;
    --dur-base:   220ms;
    --dur-slow:   380ms;
    --dur-slower: 560ms;

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* ── LAYOUT ───────────────────────────────────────────────────────── */
    --container-sm: 540px;
    --container-md: 760px;
    --container-lg: 1080px;
    --container-xl: 1320px;

    --header-h: 64px;
    --touch-min: 44px;

    /* ── Z-INDEX ──────────────────────────────────────────────────────── */
    --z-base:     0;
    --z-raised:   10;
    --z-sticky:   20;
    --z-fab:      30;
    --z-banner:   40;
    --z-drawer:   80;
    --z-backdrop: 90;
    --z-modal:    100;
    --z-toast:    1000;

    /* ── ICON ─────────────────────────────────────────────────────────── */
    --icon-xs:  14px;
    --icon-sm:  16px;
    --icon-md:  20px;
    --icon-lg:  24px;
    --icon-xl:  32px;
    --icon-2xl: 48px;

    /* ── FOCUS ring ───────────────────────────────────────────────────── */
    --focus-ring: 0 0 0 3px rgba(8, 145, 178, 0.50);
}

/* ── CONTEXT IDENTITY OVERRIDES ──────────────────────────────────────── */
/* Applied via <body class="ctx-{contexto}"> or [data-context="..."]     */

body.ctx-visita,
[data-context="visita"] {
    --context:       #3B82F6;
    --context-lift:  #60A5FA;
    --context-dim:   rgba(59, 130, 246, 0.15);
    --context-glow:  rgba(59, 130, 246, 0.35);
    --context-on:    #ffffff;
    --context-sheen: linear-gradient(135deg, #3B82F6 0%, #0891B2 100%);
}

body.ctx-upa,
[data-context="upa"] {
    --context:       #D97706;
    --context-lift:  #F59E0B;
    --context-dim:   rgba(217, 119, 6, 0.15);
    --context-glow:  rgba(217, 119, 6, 0.35);
    --context-on:    #ffffff;
    --context-sheen: linear-gradient(135deg, #D97706 0%, #F59E0B 60%, #EA580C 100%);
}

body.ctx-hospital,
[data-context="hospital"] {
    --context:       #DC2626;
    --context-lift:  #EF4444;
    --context-dim:   rgba(220, 38, 38, 0.15);
    --context-glow:  rgba(220, 38, 38, 0.38);
    --context-on:    #ffffff;
    --context-sheen: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast:   0ms;
        --dur-base:   0ms;
        --dur-slow:   0ms;
        --dur-slower: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}