/* ============================================
   DESIGN SYSTEM — "Clinical Precision"
   Fuente: stitch_multi_specialty_practice_management_suite/
           clinical_precision/DESIGN.md
   ============================================
   Este archivo define únicamente TOKENS (variables CSS).
   No contiene selectores de componentes — eso vive en
   components.css. Todas las variables usan el prefijo --ds-
   para no colisionar con las variables ya usadas en producción
   (--accent, --radius, etc. definidas en styles.css).
   ============================================ */

:root {
  /* ---- Color: superficies ---- */
  --ds-surface:                  #f5faf8;
  --ds-surface-dim:              #d6dbd9;
  --ds-surface-bright:           #f5faf8;
  --ds-surface-container-lowest: #ffffff;
  --ds-surface-container-low:    #f0f5f2;
  --ds-surface-container:        #eaefed;
  --ds-surface-container-high:   #e4e9e7;
  --ds-surface-container-highest:#dee4e1;
  --ds-surface-variant:          #dee4e1;
  --ds-surface-base:             #ffffff;
  --ds-surface-subtle:           #f8fafc;

  /* ---- Color: texto sobre superficie ---- */
  --ds-on-surface:         #171d1c;
  --ds-on-surface-variant: #3d4947;
  --ds-inverse-surface:    #2c3130;
  --ds-inverse-on-surface: #edf2f0;
  --ds-background:         #f5faf8;
  --ds-on-background:      #171d1c;

  /* ---- Color: outline / bordes ---- */
  --ds-outline:            #6d7a77;
  --ds-outline-variant:    #bcc9c6;
  --ds-border-low-contrast:#e2e8f0;

  /* ---- Color: primario (Aqua Vitta Care) ---- */
  --ds-primary:                #0F7A85;
  --ds-on-primary:              #ffffff;
  --ds-primary-container:       #0a4f56;
  --ds-on-primary-container:    #f6f9f9;
  --ds-inverse-primary:         #8adde5;
  --ds-surface-tint:            #0F7A85;
  --ds-primary-fixed:           #d7f1f4;
  --ds-primary-fixed-dim:       #8ddae2;
  --ds-on-primary-fixed:        #063237;
  --ds-on-primary-fixed-variant:#0e7680;

  /* ---- Color: secundario (Slate Blue) ---- */
  --ds-secondary:                #515f74;
  --ds-on-secondary:             #ffffff;
  --ds-secondary-container:      #d5e3fc;
  --ds-on-secondary-container:   #57657a;
  --ds-secondary-fixed:          #d5e3fc;
  --ds-secondary-fixed-dim:      #b9c7df;
  --ds-on-secondary-fixed:       #0d1c2e;
  --ds-on-secondary-fixed-variant:#3a485b;

  /* ---- Color: terciario ---- */
  --ds-tertiary:                 #924628;
  --ds-on-tertiary:               #ffffff;
  --ds-tertiary-container:        #b05e3d;
  --ds-on-tertiary-container:     #fffbff;
  --ds-tertiary-fixed:            #ffdbce;
  --ds-tertiary-fixed-dim:        #ffb59a;
  --ds-on-tertiary-fixed:         #370e00;
  --ds-on-tertiary-fixed-variant: #773215;

  /* ---- Color: feedback (status) ---- */
  --ds-success:       #10B981;
  --ds-warning:        #F59E0B;
  --ds-danger:         #E11D48;
  --ds-error:          #ba1a1a;
  --ds-on-error:       #ffffff;
  --ds-error-container:#ffdad6;
  --ds-on-error-container:#93000a;

  /* ---- Tipografía ---- */
  --ds-font-family: 'Inter', sans-serif;

  --ds-headline-lg-size: 24px;
  --ds-headline-lg-weight: 700;
  --ds-headline-lg-line: 32px;
  --ds-headline-lg-tracking: -0.02em;

  --ds-headline-md-size: 20px;
  --ds-headline-md-weight: 700;
  --ds-headline-md-line: 28px;
  --ds-headline-md-tracking: -0.01em;

  --ds-headline-sm-size: 18px;
  --ds-headline-sm-weight: 600;
  --ds-headline-sm-line: 24px;

  --ds-body-lg-size: 16px;
  --ds-body-lg-weight: 400;
  --ds-body-lg-line: 24px;

  --ds-body-md-size: 14px;
  --ds-body-md-weight: 400;
  --ds-body-md-line: 20px;

  --ds-body-sm-dense-size: 13px;
  --ds-body-sm-dense-weight: 400;
  --ds-body-sm-dense-line: 18px;

  --ds-label-uppercase-size: 12px;
  --ds-label-uppercase-weight: 600;
  --ds-label-uppercase-line: 16px;
  --ds-label-uppercase-tracking: 0.05em;

  --ds-status-pill-size: 12px;
  --ds-status-pill-weight: 500;
  --ds-status-pill-line: 12px;

  /* ---- Radios ---- */
  --ds-radius-sm:      0.25rem;  /* 4px */
  --ds-radius:         0.5rem;   /* 8px — radio primario: botones, inputs, cards */
  --ds-radius-md:      0.75rem;  /* 12px */
  --ds-radius-lg:      1rem;     /* 16px */
  --ds-radius-xl:      1.5rem;   /* 24px */
  --ds-radius-full:    9999px;   /* status pills */

  /* ---- Spacing (base 4px) ---- */
  --ds-space-base:   4px;
  --ds-space-xs:     8px;
  --ds-space-sm:     12px;
  --ds-space-md:     16px;
  --ds-space-lg:     24px;
  --ds-space-xl:     32px;
  --ds-space-gutter: 24px;
  --ds-space-margin-mobile:  16px;
  --ds-space-margin-desktop: 32px;

  /* ---- Elevación (Tonal Layers, no heavy shadows) ---- */
  --ds-elevation-0: none; /* Level 0 — fondo de la app, usa --ds-surface-subtle */
  --ds-elevation-1: none; /* Level 1 — cards/work surface, usa border 1px en vez de sombra */
  --ds-elevation-2: 0px 4px 12px rgba(15, 23, 42, 0.08); /* Level 2 — modales/dropdowns */
}