/* GENERATED FILE — do not edit.
   Source: design/_foundations/tokens.css (parent repo). Regenerate with scripts/sync-design-tokens.sh */
/* =======================================================
   FURIO VET — design foundations: colors, type, motion
   Canonical home for suite design tokens (guide §4).
   Adopted from the `tendero-contable` UI kit consumed by the
   MVP4 design prototype; this file is now the source of truth.
   Submodules import these tokens and never redefine them.
   ======================================================= */

/* The three extra display families exist for the per-clinic brand options in
   brand-options.yml (PRD-013 R-013-1). Keep the two files in step: an option
   listed there with no family here falls back to Georgia on the booking page.
   Self-hosting this import is PRD-013 §7 question 3 (Ley 21.719). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&family=Lora:wght@500;600&family=Source+Serif+4:opsz,wght@8..60,500;600&family=Work+Sans:wght@500;600&display=swap');

:root {
  /* ── Brand: teal ─────────────────────────────────────── */
  --color-teal-50:  #EFFAF6;
  --color-teal-100: #D0F0E6;
  --color-teal-400: #2BB38A;
  --color-teal-600: #0F6E56; /* primary */
  --color-teal-700: #0B5741; /* primary-hover, eyebrow */
  --color-teal-800: #0B3327; /* deep */
  --color-teal-900: #071F18; /* near-black on dark surfaces */

  /* ── Neutrals (warm cream + ink) ─────────────────────── */
  --color-ink:        #1A1917;  /* primary text */
  --color-gray-muted: #5F5E5A;  /* secondary text */
  --color-cream:      #F7F3EC;  /* warm surface */
  --color-border:     #E8E4DC;  /* warm border */

  /* ── Semantic fg/bg ──────────────────────────────────── */
  --fg-1: var(--color-ink);       /* strongest */
  --fg-2: #374151;                /* body */
  --fg-3: #6B7280;                /* supporting */
  --fg-4: #9CA3AF;                /* metadata */
  --fg-5: #D1D5DB;                /* disabled / zero */
  --fg-inverse: #ffffff;

  --bg-app:     #F9FAFB;          /* page background */
  --bg-surface: #FFFFFF;          /* cards */
  --bg-muted:   #F9FAFB;          /* table header, hover */
  --bg-subtle:  #F3F4F6;          /* chip, group row */
  --bg-dark:    var(--color-teal-900); /* nav, dark cards */

  --border-1: #E5E7EB;            /* default card / input idle */
  --border-2: #F3F4F6;            /* table row, subtle */
  --border-3: #D1D5DB;            /* input */
  --border-warm: var(--color-border);

  /* ── Semáforo (KPI traffic light) ────────────────────── */
  --sema-verde:    var(--color-teal-400);
  --sema-amarillo: #FBBF24;
  --sema-rojo:     #EF4444;
  --sema-gris:     #D1D5DB;

  /* ── Status tints (badges, cards) ────────────────────── */
  --ok-bg:   var(--color-teal-50);
  --ok-fg:   var(--color-teal-700);
  --ok-br:   var(--color-teal-100);

  --warn-bg: #FFFBEB;
  --warn-fg: #92400E;
  --warn-br: #FDE68A;

  --info-bg: #EFF6FF;
  --info-fg: #1D4ED8;

  --err-bg:  #FEF2F2;
  --err-fg:  #DC2626;
  --err-br:  #FECACA;

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Radii ───────────────────────────────────────────── */
  --radius-sm: 5px;   /* btn-sm */
  --radius-md: 6px;   /* btn, input */
  --radius-lg: 7px;   /* btn-lg */
  --radius-xl: 8px;   /* cards */
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-lift:  0 8px 32px rgba(7, 31, 24, 0.10); /* card hover */
  --shadow-menu:  0 4px 16px rgba(7, 31, 24, 0.10); /* combobox */
  --ring-primary: 0 0 0 3px rgba(15, 110, 86, 0.12); /* input focus */
  --ring-error:   0 0 0 3px rgba(239, 68, 68, 0.12);

  /* ── Motion ──────────────────────────────────────────── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-mid:  0.25s;
  --dur-slow: 0.75s;

  /* ── Semantic type roles ─────────────────────────────── */
  --page-title-size: 1.5rem;   /* 24px — page headers */
  --page-title-tracking: -0.015em;
  --stat-size:  2rem;          /* 32px — dashboard KPI */
  --kpi-size:   1.75rem;       /* 28px — KPI cards */
  --eyebrow-size: 0.6875rem;   /* 11px — uppercase labels */
  --body-size: 0.875rem;       /* 14px */
  --small-size: 0.75rem;       /* 12px — tables, meta */
}

/* ------------------------------------------------------------
   Base typography
   ------------------------------------------------------------ */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-app);
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* Semantic type classes */
.t-page-title {
  font-family: var(--font-display);
  font-size: var(--page-title-size);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: var(--page-title-tracking);
  line-height: 1.2;
}
.t-page-subtitle { font-size: var(--body-size); color: var(--fg-4); }

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-teal-600);
}

.t-stat {
  font-family: var(--font-display);
  font-size: var(--stat-size);
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1;
}

.t-kpi {
  font-family: var(--font-display);
  font-size: var(--kpi-size);
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.t-body  { font-size: var(--body-size); color: var(--fg-2); }
.t-meta  { font-size: var(--small-size); color: var(--fg-3); }
.t-code  { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-3); }
.t-num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* Signed amount utilities (CLP) */
.clp-positive { color: var(--color-teal-700); }
.clp-negative { color: #DC2626; }
.clp-zero     { color: var(--fg-5); }

/* ------------------------------------------------------------
   Motion primitive used by every inline panel (see
   forbidden-patterns.md — panels, never modals)
   ------------------------------------------------------------ */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}