/* ============================================================
   CalendarioMedico — tokens.css (v4)
   Sistema de diseño: neutros cálidos de alto contraste + acento
   índigo profundo. Tipografía Inter (UI) + Fraunces (display).
   Escala de espaciado y radios consistente.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
  /* --- Superficies (neutros cálidos, no grises azulados) --- */
  --bg:        #FBFAF9;
  --surface:   #FFFFFF;
  --surface-2: #F4F2F0;
  --surface-3: #EAE7E4;
  --ink:       #17161A;
  --ink-2:     #46434B;
  --muted:     #6E6A73;
  --line:      #E5E1DE;
  --line-2:    #D5D0CC;

  /* --- Acento: índigo profundo --- */
  --brand:       #4338CA;
  --brand-2:     #6D5EF0;
  --brand-hover: #362DA6;
  --on-brand:    #FFFFFF;
  --brand-soft:  #EEECFD;
  --brand-line:  #CFC9F8;

  /* --- Paciente: verde profundo --- */
  --pac:       #0F766E;
  --pac-hover: #0C5D57;
  --pac-soft:  #E4F3F1;
  --pac-line:  #B8DED9;

  --admin:      #44403C;
  --admin-bg:   #EFEDEB;
  --admin-line: #D6D3D1;

  /* --- Semánticos --- */
  --ok:        #15803D;
  --ok-soft:   #E7F5EC;
  --warn:      #A16207;
  --warn-soft: #FBF3E0;
  --bad:       #B91C1C;
  --bad-soft:  #FCEDEC;

  /* --- Tipografía --- */
  --display: "Fraunces", Georgia, serif;
  --font: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Espaciado --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* --- Forma y profundidad --- */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-xl: 24px;
  --shadow-1: 0 1px 2px rgba(23,22,26,.04), 0 1px 3px rgba(23,22,26,.06);
  --shadow-2: 0 2px 4px rgba(23,22,26,.04), 0 8px 24px rgba(23,22,26,.08);
  --shadow-3: 0 4px 8px rgba(23,22,26,.06), 0 20px 48px rgba(23,22,26,.14);
  --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0E0D11;
    --surface:   #17161B;
    --surface-2: #1F1D24;
    --surface-3: #2A2731;
    --ink:       #F2F0EE;
    --ink-2:     #C9C5CC;
    --muted:     #948F9B;
    --line:      #2C2933;
    --line-2:    #3B3746;

    --brand:       #A5A0FB;
    --brand-2:     #C4BFFE;
    --brand-hover: #C4BFFE;
    --on-brand:    #16123A;
    --brand-soft:  #221E45;
    --brand-line:  #3A3470;

    --pac:       #4FD1C5;
    --pac-hover: #7EE0D7;
    --pac-soft:  #10302E;
    --pac-line:  #1D4E4A;

    --admin:      #B5B0AC;
    --admin-bg:   #211F24;
    --admin-line: #3A3640;

    --ok:        #4ADE80;
    --ok-soft:   #10281A;
    --warn:      #E3B341;
    --warn-soft: #2B2211;
    --bad:       #F87171;
    --bad-soft:  #33161A;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.35);
    --shadow-3: 0 8px 20px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:        #0E0D11;
  --surface:   #17161B;
  --surface-2: #1F1D24;
  --surface-3: #2A2731;
  --ink:       #F2F0EE;
  --ink-2:     #C9C5CC;
  --muted:     #948F9B;
  --line:      #2C2933;
  --line-2:    #3B3746;

  --brand:       #A5A0FB;
  --brand-2:     #C4BFFE;
  --brand-hover: #C4BFFE;
  --on-brand:    #16123A;
  --brand-soft:  #221E45;
  --brand-line:  #3A3470;

  --pac:       #4FD1C5;
  --pac-hover: #7EE0D7;
  --pac-soft:  #10302E;
  --pac-line:  #1D4E4A;

  --admin:      #B5B0AC;
  --admin-bg:   #211F24;
  --admin-line: #3A3640;

  --ok:        #4ADE80;
  --ok-soft:   #10281A;
  --warn:      #E3B341;
  --warn-soft: #2B2211;
  --bad:       #F87171;
  --bad-soft:  #33161A;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.35);
  --shadow-3: 0 8px 20px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);
}