/* ═══════════════════════════════════════════════════════
   CFARM Design System "Clinica" — CSS Tokens
   Copy this file into your project as the single source
   of truth for all design tokens.
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── DARK THEME (Default) ──────────────────────────── */
:root {
    /* Fonts */
    --font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Background Scale */
    --bg-base:     #080d16;
    --bg-raised:   #0e1726;
    --bg-overlay:  #142034;
    --bg-sunken:   #060a11;

    /* Primary: Blue — Trust, Authority */
    --color-primary:        #4a9eff;
    --color-primary-hover:  #3585e0;
    --color-primary-muted:  rgba(74, 158, 255, 0.12);
    --color-primary-border: rgba(74, 158, 255, 0.22);
    --color-primary-glow:   rgba(74, 158, 255, 0.30);

    /* Secondary: Teal — Health, Recovery */
    --color-secondary:        #2dd4a8;
    --color-secondary-hover:  #22b88f;
    --color-secondary-muted:  rgba(45, 212, 168, 0.10);
    --color-secondary-border: rgba(45, 212, 168, 0.20);

    /* Status */
    --color-success:        #22c55e;
    --color-success-muted:  rgba(34, 197, 94, 0.10);
    --color-success-border: rgba(34, 197, 94, 0.22);

    --color-warning:        #f59e0b;
    --color-warning-muted:  rgba(245, 158, 11, 0.10);
    --color-warning-border: rgba(245, 158, 11, 0.22);

    --color-danger:         #ef4444;
    --color-danger-muted:   rgba(239, 68, 68, 0.10);
    --color-danger-border:  rgba(239, 68, 68, 0.22);

    --color-info:           #818cf8;
    --color-info-muted:     rgba(129, 140, 248, 0.10);
    --color-info-border:    rgba(129, 140, 248, 0.22);

    /* Text */
    --text-primary:   #e8edf6;
    --text-secondary: #8896ab;
    --text-tertiary:  #4a5568;
    --text-inverse:   #080d16;

    /* Borders */
    --border-default: rgba(136, 150, 171, 0.08);
    --border-subtle:  rgba(136, 150, 171, 0.05);
    --border-strong:  rgba(136, 150, 171, 0.16);
    --border-focus:   var(--color-primary);

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 20px var(--color-primary-glow);

    /* Glass */
    --glass-bg: rgba(14, 23, 38, 0.85);

    /* ── Medical Category Colors ── */
    --cat-cardio:   #ef4444;
    --cat-respi:    #3b82f6;
    --cat-neuro:    #a855f7;
    --cat-trauma:   #f97316;
    --cat-digestif: #eab308;
    --cat-gyneco:   #ec4899;
    --cat-psy:      #6366f1;
    --cat-pedia:    #14b8a6;
    --cat-toxico:   #84cc16;
    --cat-divers:   #64748b;

    /* ── Spacing ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  48px;
    --space-10: 64px;

    /* ── Radius ── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ── Typography Scale ── */
    --text-display: 2.5rem;
    --text-h1:      1.75rem;
    --text-h2:      1.25rem;
    --text-h3:      1.05rem;
    --text-body:    0.9375rem;
    --text-small:   0.8125rem;
    --text-caption: 0.6875rem;
    --text-mono-sz: 0.875rem;

    /* ── Motion ── */
    --duration-instant: 100ms;
    --duration-fast:    150ms;
    --duration-normal:  250ms;
    --duration-slow:    350ms;
    --duration-enter:   300ms;
    --duration-exit:    200ms;

    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:     cubic-bezier(0.4, 0, 1, 0.6);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --page-max-width: 720px;
    --header-height:  52px;
    --tabbar-height:  60px;

    /* ── Icons ── */
    --icon-xs: 12px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;

    /* ── Short aliases (used by page-level CSS) ── */
    --font-h: var(--font-heading);
    --font-b: var(--font-body);
    --font-m: var(--font-mono);

    --primary:        var(--color-primary);
    --primary-hover:  var(--color-primary-hover);
    --primary-muted:  var(--color-primary-muted);
    --primary-border: var(--color-primary-border);
    --primary-glow:   var(--color-primary-glow);

    --secondary:        var(--color-secondary);
    --secondary-hover:  var(--color-secondary-hover);
    --secondary-muted:  var(--color-secondary-muted);
    --secondary-border: var(--color-secondary-border);

    --success:        var(--color-success);
    --success-muted:  var(--color-success-muted);
    --success-border: var(--color-success-border);

    --warning:        var(--color-warning);
    --warning-muted:  var(--color-warning-muted);
    --warning-border: var(--color-warning-border);

    --danger:         var(--color-danger);
    --danger-muted:   var(--color-danger-muted);
    --danger-border:  var(--color-danger-border);

    --info:           var(--color-info);
    --info-muted:     var(--color-info-muted);
    --info-border:    var(--color-info-border);

    --text-1:   var(--text-primary);
    --text-2:   var(--text-secondary);
    --text-3:   var(--text-tertiary);
    --text-inv: var(--text-inverse);

    --border:   var(--border-default);
    --border-s: var(--border-strong);

    --glass: var(--glass-bg);

    --r-sm:   var(--radius-sm);
    --r:      var(--radius-md);
    --r-lg:   var(--radius-lg);
    --r-xl:   var(--radius-xl);
    --r-full: var(--radius-full);

    --ease: var(--ease-out);
    --dur:  var(--duration-fast);

    --header-h:  var(--header-height);
    --tabbar-h:  var(--tabbar-height);

    --sp-1: var(--space-1);
    --sp-2: var(--space-2);
    --sp-3: var(--space-3);
    --sp-4: var(--space-4);
    --sp-5: var(--space-5);
    --sp-6: var(--space-6);
    --sp-7: var(--space-7);
    --sp-8: var(--space-8);
}

/* ── LIGHT THEME ───────────────────────────────────── */
[data-theme="light"] {
    --bg-base:     #f5f7fa;
    --bg-raised:   #ffffff;
    --bg-overlay:  #eef1f6;
    --bg-sunken:   #e8ecf1;

    --color-primary:        #1d4ed8;
    --color-primary-hover:  #1e40af;
    --color-primary-muted:  rgba(29, 78, 216, 0.08);
    --color-primary-border: rgba(29, 78, 216, 0.20);
    --color-primary-glow:   rgba(29, 78, 216, 0.15);

    --color-secondary:        #0f766e;
    --color-secondary-hover:  #115e59;
    --color-secondary-muted:  rgba(15, 118, 110, 0.08);
    --color-secondary-border: rgba(15, 118, 110, 0.20);

    --color-success:        #047857;
    --color-success-muted:  rgba(4, 120, 87, 0.08);
    --color-success-border: rgba(4, 120, 87, 0.20);

    --color-warning:        #92400e;
    --color-warning-muted:  rgba(146, 64, 14, 0.08);
    --color-warning-border: rgba(146, 64, 14, 0.20);

    --color-danger:         #b91c1c;
    --color-danger-muted:   rgba(185, 28, 28, 0.08);
    --color-danger-border:  rgba(185, 28, 28, 0.20);

    --color-info:           #4f46e5;
    --color-info-muted:     rgba(79, 70, 229, 0.08);
    --color-info-border:    rgba(79, 70, 229, 0.20);

    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-tertiary:  #475569;
    --text-inverse:   #ffffff;

    --border-default: rgba(15, 23, 42, 0.12);
    --border-subtle:  rgba(15, 23, 42, 0.07);
    --border-strong:  rgba(15, 23, 42, 0.20);

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.15);
    --shadow-glow: 0 0 20px var(--color-primary-glow);

    --glass-bg: rgba(245, 247, 250, 0.88);

    /* Light category colors — all ≥4.5:1 on any surface */
    --cat-cardio:   #b91c1c;
    --cat-respi:    #1d4ed8;
    --cat-neuro:    #6d28d9;
    --cat-trauma:   #9a3412;
    --cat-digestif: #854d0e;
    --cat-gyneco:   #be185d;
    --cat-psy:      #4338ca;
    --cat-pedia:    #0f766e;
    --cat-toxico:   #3f6212;
    --cat-divers:   #374151;

    /* ── Short aliases (MUST duplicate — var() in :root resolves
         against :root's own values, not body's overrides) ── */
    --primary:        #1d4ed8;
    --primary-hover:  #1e40af;
    --primary-muted:  rgba(29, 78, 216, 0.08);
    --primary-border: rgba(29, 78, 216, 0.20);
    --primary-glow:   rgba(29, 78, 216, 0.15);

    --secondary:        #0f766e;
    --secondary-hover:  #115e59;
    --secondary-muted:  rgba(15, 118, 110, 0.08);
    --secondary-border: rgba(15, 118, 110, 0.20);

    --success:        #047857;
    --success-muted:  rgba(4, 120, 87, 0.08);
    --success-border: rgba(4, 120, 87, 0.20);

    --warning:        #92400e;
    --warning-muted:  rgba(146, 64, 14, 0.08);
    --warning-border: rgba(146, 64, 14, 0.20);

    --danger:         #b91c1c;
    --danger-muted:   rgba(185, 28, 28, 0.08);
    --danger-border:  rgba(185, 28, 28, 0.20);

    --info:           #4f46e5;
    --info-muted:     rgba(79, 70, 229, 0.08);
    --info-border:    rgba(79, 70, 229, 0.20);

    --text-1:   #0f172a;
    --text-2:   #334155;
    --text-3:   #475569;
    --text-inv: #ffffff;

    --border:   rgba(15, 23, 42, 0.12);
    --border-s: rgba(15, 23, 42, 0.20);

    --glass: rgba(245, 247, 250, 0.88);
}

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
    transition: background var(--duration-slow) ease, color var(--duration-slow) ease;
}

a { text-decoration: none; color: inherit; }

/* ── FOCUS ─────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ── REDUCED MOTION ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── ANIMATIONS ────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Logo home button (shared across inner pages) */
.logo-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    background: var(--color-primary-muted);
    border: 1px solid var(--color-primary-border);
    padding: 4px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.logo-home:hover {
    background: var(--color-primary-border);
    border-color: var(--color-primary);
}
.logo-home img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(56%) sepia(72%) saturate(1200%) hue-rotate(185deg) brightness(102%) contrast(101%);
}
[data-theme="light"] .logo-home img {
    filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(2000%) hue-rotate(215deg) brightness(90%) contrast(95%);
}

/* Toast notification */
.toast-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.4));
    padding: 10px 18px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #e8edf6);
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    animation: toastIn 0.25s var(--ease-out, ease-out) forwards;
}
.toast.out {
    animation: toastOut 0.2s ease-in forwards;
}
.toast--success { border-left: 3px solid var(--color-success, #22c55e); }
.toast--error   { border-left: 3px solid var(--color-danger, #ef4444); }
.toast--info    { border-left: 3px solid var(--color-primary, #4a9eff); }
.toast--success i { color: var(--color-success, #22c55e); }
.toast--error i   { color: var(--color-danger, #ef4444); }
.toast--info i    { color: var(--color-primary, #4a9eff); }
@keyframes toastIn { to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }