/* Voice design tokens: single source of truth (design/DESIGN-SYSTEM.md §3). No raw hex in components. */
:root{
  /* surfaces */
  --sand:#eeefe9;    /* page canvas, sidebar */
  --sand-2:#e4e6de;  /* empty tracks, hovers on sand, the empty part of bars */
  --card:#ffffff;    /* cards, buttons, inputs */
  --tint:#f7f7f2;    /* areas inside a card (toolbar, timeline), hover on white */
  --line:#d9dad2;    /* borders and dividers */
  --line-2:#c4c6bc;  /* stronger borders (secondary button, checkbox) */

  /* text */
  --ink:#1b1c18;     /* main text, current word, playhead, pressed state */
  --ink-2:#4a4c44;   /* secondary text: metadata, descriptions, emails, timestamps, group headers, icons */
  --ink-3:#6f7168;   /* ONLY inactive things: placeholders, done tasks, filler words, disabled. Never information you need to read (4.3:1 on sand) */

  /* accent: action */
  --gold:#f2a900;      /* primary button, play */
  --gold-edge:#cf8f00; /* the gold's lower edge, the ▶ in chips */
  --gold-soft:#fdf0cc; /* search hits, commitments, hover on chips */
  --gold-ink:#6b4c00;  /* text on gold-soft */
  --gold-line:#f0d58a; /* border on gold-soft */

  /* accent: information */
  --blue:#2c56c9; --blue-soft:#e8eefb;   /* links, focus ring */
  --ok:#1f6b3e; --ok-soft:#e3f1e8; --ok-line:#c5e2cf;  /* "listo" state */
  --violet-soft:#f1e9f6;
  --danger:#a3341f;   /* errors only (failed call, wrong key); never decoration */

  /* speakers (see section 5) */
  --spk-0:#2c56c9; --spk-1:#c4572a; --spk-2:#7d4a9e; --spk-3:#2f7d53;
  --spk-4:#1f7a8c; --spk-5:#b03a6a; --spk-6:#7a6a1f; --spk-7:#55606e;

  /* shape */
  --r:12px;     /* cards */
  --r-sm:8px;   /* buttons, inputs, items */
  --r-xs:6px;   /* small buttons, chips */
  --control-h:40px; /* ONE height for every control: buttons, selects, filters, search, segmented (Guillermo, 2026-10-02) */
  --page-max:1400px; /* ONE content width for every page: fluid 100% up to this max (Guillermo, 2026-10-02) */

  /* elevation (design system v2.3): cards have none, only things that float get a shadow */
  --sh-knob:0 1px 2px rgba(27,28,24,.2);      /* switch knob */
  --sh-pin:0 6px 18px rgba(27,28,24,.06);     /* the pinned player */
  --sh-pop:0 10px 28px rgba(27,28,24,.12);    /* menus, dropdowns, popovers, the selection bar */
  --sh-dlg:0 18px 48px rgba(27,28,24,.2);     /* dialogs */
  --sh-sheet:0 -10px 32px rgba(27,28,24,.18); /* bottom sheets on phones */
  --edge-soft:inset 0 0 0 1px rgba(27,28,24,.08); /* hairline on colored swatches */
  --scrim:rgba(27,28,24,.35);                 /* behind a dialog or a sheet */
  /* on top of video and thumbnails (always dark) */
  --media-scrim:rgba(27,28,24,.55); --media-tile:rgba(255,255,255,.07); --media-badge:rgba(0,0,0,.6); --media-shine:rgba(255,255,255,.12);

  /* call types: the color each type gets in Settings → Tipos de llamada (Guillermo, 2026-10-02).
     A pale background + dark text of the same hue; never a solid fill (solid fills are people). */
  --ty-neutral-bg:#e6e7df; --ty-neutral:#3d3f37;
  --ty-blue-bg:#e5ecfb;    --ty-blue:#23449f;
  --ty-green-bg:#e0f0e5;   --ty-green:#1d5c36;
  --ty-violet-bg:#f0e6f6;  --ty-violet:#5f3479;
  --ty-rose-bg:#f9e5ec;    --ty-rose:#8c2a52;
  --ty-ochre-bg:#f2ecd6;   --ty-ochre:#5c5014;

  /* type */
  --font:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* the 7 text styles (design system §4). Components write font:var(--t-*), never a raw font-size. */
  --t-page:700 26px/1.2 var(--font);        /* page title: Llamadas, Ajustes, the call's title */
  --t-section:600 17px/1.35 var(--font);    /* section title: card titles, a Settings section, a call in the list */
  --t-body:400 15px/1.55 var(--font);       /* text: transcript, summary, action items */
  --t-secondary:400 14px/1.45 var(--font);  /* secondary text: descriptions, emails, metadata, input text */
  --t-label:600 14px/1.35 var(--font);      /* label: buttons, side menu, names in rows, speaker names */
  --t-caption:600 12px/1.35 var(--font);    /* caption: group and column headers (UPPERCASE), tags, sidebar labels */
  --t-num:500 13px/1.35 var(--mono);        /* numbers: time, duration, %, counters, dates in the calendar */
}
@media (max-width:640px){
  :root{--t-page:700 22px/1.2 var(--font)}
}