/* ============================================================
   SINA — Design tokens
   Source: Figma variables (variables.json, v1.0.4)
   Do not edit values here — update the Figma export and re-sync.
   ============================================================ */

:root {
  /* ---------- Colors :: Primary ---------- */
  --color-primary-blue:        #00AECB;
  --color-primary-blue-10:     #EEF7F9;

  /* ---------- Colors :: Secondary ---------- */
  --color-secondary-purple:    #6921A4;

  /* ---------- Colors :: Text ---------- */
  --color-text-global:         #334156;

  /* ---------- Colors :: Absolute ---------- */
  --color-absolute-black:      #0B0917;
  --color-absolute-white:      #FFFFFF;

  /* ---------- Colors :: Gray ---------- */
  --color-gray-100:            #848587;
  --color-gray-50:             #A9AAAC;
  --color-gray-10:             #E6E6E6;
  --color-gray-extra-light:    #F2F2F2;
  --color-gray-blue-light:     #F9FAFC;

  /* ---------- Colors :: Alert (warning / amber) ---------- */
  --color-alert-fill:          #F6BF2E;
  --color-alert-text:          #ECB525;
  --color-alert-10:            #FEF9EA;

  /* ---------- Colors :: Error ---------- */
  --color-error-text:          #CA0005;
  --color-error-10:            #FFE1E2;

  /* ---------- Colors :: Success ---------- */
  --color-success-text:        #007A55;
  --color-success-10:          #E8FFF6;

  /* ---------- Colors :: Accent (action blue) ---------- */
  --color-accent-fill:         #1559E3;
  --color-accent-10:           #D0DEFB;

  /* ============================================================
     Typography
     Family: Inter
     Weights: 400 Regular · 600 Semi Bold · 700 Bold
     ============================================================ */
  --font-family-base: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Display */
  --font-display-large-size:      28px;
  --font-display-large-weight:    700;
  --font-display-medium-size:     24px;
  --font-display-medium-weight:   700;

  /* Title */
  --font-title-medium-size:           16px;
  --font-title-medium-weight:         700;
  --font-title-medium-semibold-size:  16px;
  --font-title-medium-semibold-weight: 600;
  --font-title-small-size:            14px;
  --font-title-small-weight:          700;

  /* Body */
  --font-body-medium-size:            16px;
  --font-body-medium-weight:          400;
  --font-body-small-size:             14px;
  --font-body-small-weight:           400;
  --font-body-small-semibold-size:    14px;
  --font-body-small-semibold-weight:  600;
  --font-body-extra-small-size:       12px;
  --font-body-extra-small-weight:     400;
  --font-body-extra-small-line:       18px;

  /* Label */
  --font-label-medium-size:           14px;
  --font-label-medium-weight:         400;
  --font-label-medium-semibold-size:  14px;
  --font-label-medium-semibold-weight: 600;
  --font-label-medium-line:           1.5;

  /* Input */
  --font-input-text-size:             14px;
  --font-input-text-weight:           400;

  /* ============================================================
     Grid (from "Grid hospitales")
     ============================================================ */
  --grid-columns: 12;
  --grid-gutter: 16px;
  --grid-margin: 32px;
}

/* ------------------------------------------------------------
   Typography utility classes — match the Figma style names
   ------------------------------------------------------------ */
.t-display-large {
  font-family: var(--font-family-base);
  font-size: var(--font-display-large-size);
  font-weight: var(--font-display-large-weight);
}
.t-display-medium {
  font-family: var(--font-family-base);
  font-size: var(--font-display-medium-size);
  font-weight: var(--font-display-medium-weight);
}
.t-title-medium {
  font-family: var(--font-family-base);
  font-size: var(--font-title-medium-size);
  font-weight: var(--font-title-medium-weight);
}
.t-title-medium-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-title-medium-semibold-size);
  font-weight: var(--font-title-medium-semibold-weight);
}
.t-title-small {
  font-family: var(--font-family-base);
  font-size: var(--font-title-small-size);
  font-weight: var(--font-title-small-weight);
}
.t-body-medium {
  font-family: var(--font-family-base);
  font-size: var(--font-body-medium-size);
  font-weight: var(--font-body-medium-weight);
}
.t-body-small {
  font-family: var(--font-family-base);
  font-size: var(--font-body-small-size);
  font-weight: var(--font-body-small-weight);
}
.t-body-small-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-body-small-semibold-size);
  font-weight: var(--font-body-small-semibold-weight);
}
.t-body-extra-small {
  font-family: var(--font-family-base);
  font-size: var(--font-body-extra-small-size);
  font-weight: var(--font-body-extra-small-weight);
  line-height: var(--font-body-extra-small-line);
}
.t-label-medium {
  font-family: var(--font-family-base);
  font-size: var(--font-label-medium-size);
  font-weight: var(--font-label-medium-weight);
  line-height: var(--font-label-medium-line);
}
.t-label-medium-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-label-medium-semibold-size);
  font-weight: var(--font-label-medium-semibold-weight);
  line-height: var(--font-label-medium-line);
}
.t-label-medium-underline {
  font-family: var(--font-family-base);
  font-size: var(--font-label-medium-semibold-size);
  font-weight: var(--font-label-medium-semibold-weight);
  line-height: var(--font-label-medium-line);
  text-decoration: underline;
}
.t-input-text {
  font-family: var(--font-family-base);
  font-size: var(--font-input-text-size);
  font-weight: var(--font-input-text-weight);
}