/*
  Los Llanos — design tokens as CSS custom properties.
  Generated from tokens.json (source of truth — regenerate this file by hand if tokens.json changes).
  See README.md for usage rules, contrast caveats and where each token applies.
*/

:root {
  /* Color — surfaces */
  --surface: #ffffff;
  --surface-100: #f8f8f8;
  --surface-150: #f9f9f9;
  --surface-200: #e8e8e8;
  --surface-login: #f2f2f2;
  --line: #cecece;
  --toggle-off: #b5b5b5;

  /* Color — text / icon */
  --ink: #6e6e6e;
  --icon: #6f6f6f;
  --footer: #6f6f6f;

  /* Color — action */
  --lime: #ceda4a;
  --lime-dark: #98b034;
  --lime-shadow: #8eb01d;
  --teal: #4db1b3;
  --teal-soft: #74b0b1;
  --orange: #f39c11;
  --orange-dark: #e77e23;
  --amber: #ffad23;
  --coral: #e6914e;
  --green: #5a9f83;

  /* Color — accessibility addition (not in original mockups) */
  --focus: #3a3a3a;

  /* Color — logo only, never UI */
  --logo-green: #9ab334;
  --logo-teal: #099291;
  --logo-teal-light: #75b2b3;
  --logo-ochre: #d19018;
  --logo-orange: #cd6830;
  --logo-ink: #000000;

  /* Typography — families */
  --font-sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 48px;
  --header-height: 80px;
  --titlebar-height: 70px;
  --sidebar-width: 328px;
  --control-height: 44px;
  --tab-width: 192px;
  --tab-height: 54px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-action: 7px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Shadow */
  --shadow-lime-edge: 0 5px 0 #98b034;
  --shadow-orange-edge: 0 5px 0 #e77e23;
  --shadow-field: 2px 2px 2px rgba(0, 0, 0, 0.12);
  --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.10);

  /* Border width */
  --tab-bar: 4px;
  --nav-indicator: 11px;
}

/*
  Type scale (font-size / line-height / weight) — apply as utility classes or component
  styles, not as tokens (CSS custom properties can't hold multiple declarations).
  Family is always --font-sans except brand-sub/brand-name (--font-brand).

  login-heading      30px / 36px / 300
  page-title         24px / 30px / 400
  patient-name       22px / 28px / 400
  section-title      21px / 28px / 400
  nav                16px / 22px / 300
  form-label         17px / 24px / 300
  table-head         16px / 22px / 400
  body               16px / 22px / 300
  field-value        15px / 20px / 300
  button             15px / 20px / 300 — uppercase
  user-role          15px / 20px / 300 — italic
  placeholder        18px / 24px / 300 — italic
  field-label        12px / 16px / 300
  field-label-italic 11px / 14px / 300 — italic
  tab-label          11px / 14px / 300 — uppercase
  breadcrumb         11px / 14px / 300
  brand-sub          13px / 16px / 400 — font-brand, letter-spacing 0.08em
  brand-name         26px / 26px / 400 — font-brand
*/