/*
 * Kirlo (web app skill) tokens: a dark, warm-charcoal web-app system with one blue (#2946FF) accent.
 * Fonts (Google Fonts):
 *   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
 */

:root {
  color-scheme: dark;

  /* ---------- surfaces (warm charcoal, darkest → lightest) ---------- */
  --em-bg: #0e0d0c;          /* app background, sidebar */
  --em-surface: #161514;     /* cards, panels, table bodies */
  --em-surface-2: #1d1b1a;   /* controls (selects, inputs, secondary buttons), hover rows */
  --em-surface-3: #262321;   /* pressed / active nav item / selected */

  /* ---------- lines ---------- */
  --em-line: #2b2826;        /* card borders, control borders */
  --em-line-soft: #201e1c;   /* table row dividers, chart grid */

  /* ---------- text ---------- */
  --em-text: #f5f2ef;        /* primary text, numbers */
  --em-text-2: #b3ada7;      /* secondary text, nav items */
  --em-text-3: #7d7772;      /* labels, captions, table headers, placeholders */

  /* ---------- accent + data colors ---------- */
  --em-primary: #2946ff;           /* Primary blue: buttons, fills, active bars, main chart series */
  --em-primary-hover: #4560ff;
  --em-primary-soft: rgba(41,70,255,.18);
  --em-primary-line: rgba(41,70,255,.55);   /* borders of primary-tinted elements */
  --em-primary-text: #8c9bff;      /* primary used AS TEXT/ICON on dark (links, pills, active icons): #2946ff is too dark to read */
  --em-on-primary: #ffffff;        /* text on the blue button */
  --em-series-2: #f4b183;          /* second chart series (comparison, target, previous) — warm apricot, contrasts the blue */
  --em-series-3: #8f8a85;          /* third chart series — warm grey */
  --em-sky: #7dd3fc;               /* info status */
  --em-sky-soft: rgba(125,211,252,.13);

  /* ---------- status ---------- */
  --em-success: #4ade80;  --em-success-soft: rgba(74,222,128,.12);
  --em-warning: #fbbf24;  --em-warning-soft: rgba(251,191,36,.12);
  --em-danger:  #fb7185;  --em-danger-soft:  rgba(251,113,133,.13);   /* rose: distinct from the blue brand and the apricot data color */
  --em-info:    #7dd3fc;  --em-info-soft:    rgba(125,211,252,.12);
  --em-neutral-soft: rgba(245,242,239,.07);

  /* ---------- type ---------- */
  --em-font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --em-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;  /* every number, price, ID, time */

  /* ---------- shape ---------- */
  --em-r-card: 16px;      /* cards, panels, tables */
  --em-r-control: 10px;   /* inputs, selects, icon buttons, segmented controls */
  --em-r-pill: 999px;     /* buttons, status pills, tabs underline caps */

  /* ---------- layout ---------- */
  --em-sidebar: 240px;
  --em-topbar: 64px;
  --em-gap: 12px;         /* gap between cards */
  --em-pad: 20px;         /* page padding + card padding */

  /* ---------- motion ---------- */
  --em-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------- type roles ---------- */
.em-h1    { font: 600 20px/1.25 var(--em-font); letter-spacing: -0.2px; }  /* page title */
.em-h2    { font: 600 15px/1.35 var(--em-font); }                           /* card title */
.em-kpi   { font: 500 28px/1.1 var(--em-mono); letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.em-body  { font: 400 14px/1.45 var(--em-font); }
.em-small { font: 400 13px/1.4 var(--em-font); }
.em-label { font: 500 11px/1.3 var(--em-font); letter-spacing: .6px; text-transform: uppercase; }  /* section eyebrows, table headers */
.em-num   { font-family: var(--em-mono); font-variant-numeric: tabular-nums; }

/* Tailwind v4: bg-em-surface, text-em-text-2, rounded-em-card, font-em-mono … */
@theme inline {
  --color-em-bg: var(--em-bg);
  --color-em-surface: var(--em-surface);
  --color-em-surface-2: var(--em-surface-2);
  --color-em-surface-3: var(--em-surface-3);
  --color-em-line: var(--em-line);
  --color-em-text: var(--em-text);
  --color-em-text-2: var(--em-text-2);
  --color-em-text-3: var(--em-text-3);
  --color-em-primary: var(--em-primary);
  --color-em-series-2: var(--em-series-2);
  --color-em-series-3: var(--em-series-3);
  --radius-em-card: var(--em-r-card);
  --radius-em-control: var(--em-r-control);
  --font-em: var(--em-font);
  --font-em-mono: var(--em-mono);
}