/* ==========================================================================
   AG Design Tokens — :root layer
   Source of truth: engine/ingress/design/style-guide.html (AG «Nata sharp» visual guideline)
   Purpose: single source of CSS custom properties for the Universal AI Space
   engine UI. All tokens live on :root; no component selectors here.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nata+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Palette: ink (dark surface layers) ─────────────────────────────── */
  --ag-ink-0: #0B0C10;   /* page background */
  --ag-ink-1: #141C1C;   /* section / elevated surface */
  --ag-ink-2: #1B1E26;   /* card / panel surface */
  --ag-line:  #272B34;   /* borders / dividers */

  /* ── Palette: text ─────────────────────────────────────────────────── */
  --ag-text-hi:  #F4F5F7;   /* primary / headings */
  --ag-text-mid: #A9B0BB;   /* secondary / labels */
  --ag-text-lo:  #6C7482;   /* muted / placeholder */

  /* ── Palette: accent (brand) ───────────────────────────────────────── */
  --ag-accent:       #E23A50;           /* primary CTA, brand colour */
  --ag-accent-hover: #F04C61;           /* hover / active state */
  --ag-accent-dim:   rgba(226,58,80,0.14);  /* subtle tinted surface */

  /* ── Palette: semantic status ──────────────────────────────────────── */
  --ag-ok:   #3FB97F;   /* success / completed / done */
  --ag-warn: #EBA330;   /* warning / waiting / gate */
  --ag-info: #4E8DF5;   /* informational / running */

  /* legacy aliases — kept for existing component references */
  --ag-bg-1:         var(--ag-ink-0);
  --ag-bg-2:         var(--ag-ink-2);
  --ag-bg-3:         var(--ag-line);
  --ag-text-1:       var(--ag-text-hi);
  --ag-text-2:       var(--ag-text-mid);
  --ag-text-3:       var(--ag-text-lo);
  --ag-status-running: var(--ag-info);
  --ag-status-done:    var(--ag-ok);
  --ag-status-waiting: var(--ag-warn);
  --ag-status-failed:  var(--ag-accent);
  --ag-border:         var(--ag-line);
  --ag-border-light:   var(--ag-line);

  /* ── Typography ────────────────────────────────────────────────────── */
  --ag-font-display: 'Nata Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ag-font-body:    'Nata Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ag-font:         var(--ag-font-body);
  --ag-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* font sizes — type scale */
  --ag-fs-display: 4.5rem;    /* 72px — hero / display */
  --ag-fs-h1:      3rem;      /* 48px — H1 */
  --ag-fs-h2:      2rem;      /* 32px — H2 */
  --ag-fs-h3:      1.375rem;  /* 22px — H3 */
  --ag-fs-body:    1.0625rem; /* 17px — body */
  --ag-fs-mono:    0.8125rem; /* 13px — mono / code */
  --ag-fs-eyebrow: 0.6875rem; /* 11px — eyebrow / label */

  /* font weights */
  --ag-fw-normal:    400;
  --ag-fw-medium:    500;
  --ag-fw-semibold:  600;
  --ag-fw-bold:      700;

  /* line heights */
  --ag-lh-display: 1.02;
  --ag-lh-h1:      1.1;
  --ag-lh-h2:      1.2;
  --ag-lh-h3:      1.3;
  --ag-lh-body:    1.6;
  --ag-lh-mono:    1.6;
  --ag-lh:         var(--ag-lh-body);

  /* letter spacing */
  --ag-ls-display: -0.035em;
  --ag-ls-h1:      -0.025em;
  --ag-ls-h2:      -0.015em;
  --ag-ls-eyebrow: 0.14em;

  /* ── Typography — expanded ramp (NEW levels, mirror of ui-kit) ─────────── */
  /* font sizes (rem @16px root) — weight via --ag-fw-* noted per level */
  --ag-fs-h4:      1.125rem;  /* 18px — subsection heading (fw 600) */
  --ag-fs-title:   1rem;      /* 16px — card / panel title (fw 600) */
  --ag-fs-caption: 0.75rem;   /* 12px — caption / metadata (fw 500) */
  --ag-fs-micro:   0.6875rem; /* 11px — smallest sans meta (fw 600) */
  --ag-fs-mono-lg: 0.875rem;  /* 14px — larger mono / value (fw 400) */
  --ag-fs-mono-sm: 0.6875rem; /* 11px — smallest mono meta (fw 500) */
  /* line heights */
  --ag-lh-h4:      1.35;
  --ag-lh-title:   1.4;
  --ag-lh-caption: 1.4;
  --ag-lh-micro:   1.3;
  --ag-lh-mono-lg: 1.6;
  --ag-lh-mono-sm: 1.5;
  /* letter spacing (only where non-zero) */
  --ag-ls-h4:      -0.005em;
  --ag-ls-micro:   0.02em;
  --ag-ls-mono-sm: 0.02em;

  /* ── Spacing (4px base scale) ─────────────────────────────────────────── */
  --ag-space-1:  4px;
  --ag-space-2:  8px;
  --ag-space-3:  12px;
  --ag-space-4:  16px;
  --ag-space-6:  24px;
  --ag-space-8:  32px;
  --ag-space-12: 48px;

  /* legacy aliases */
  --ag-space-xs:  var(--ag-space-1);
  --ag-space-sm:  var(--ag-space-2);
  --ag-space-md:  var(--ag-space-4);
  --ag-space-lg:  var(--ag-space-6);
  --ag-space-xl:  var(--ag-space-8);
  --ag-space-2xl: var(--ag-space-12);

  /* ── Border radius — ladder ───────────────────────────────────────────── */
  --ag-radius-section:  14px;   /* large sections / modals */
  --ag-radius-card:     10px;   /* cards / panels */
  --ag-radius-control:   8px;   /* buttons / inputs / chips */
  --ag-radius-chip:       5px;   /* compact chips / tags */
  --ag-radius-pill:    9999px;   /* badges / pills */

  /* legacy aliases */
  --ag-radius-sm:   var(--ag-radius-chip);
  --ag-radius-md:   var(--ag-radius-control);
  --ag-radius-lg:   var(--ag-radius-card);
  --ag-radius-full: var(--ag-radius-pill);

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --ag-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --ag-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --ag-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* ── Icons ────────────────────────────────────────────────────────────── */
  /* Lucide icons: 1.75px stroke, 24x24 default */
  --ag-icon-size:    18px;
  --ag-icon-stroke:  1.75px;
  /* glyph scale — five fixed sizes (mirror of ui-kit) */
  --ag-icon-xs: 14px;
  --ag-icon-sm: 16px;
  --ag-icon-md: 20px;   /* default glyph */
  --ag-icon-lg: 24px;
  --ag-icon-xl: 32px;
  /* chip scale — square wrapper (radius 0) the glyph sits inside */
  --ag-chip-sm: 28px;
  --ag-chip-md: 36px;
  --ag-chip-lg: 44px;

  /* ── Status dot ───────────────────────────────────────────────────────── */
  --ag-status-dot-size: 7px;
}

/* ==========================================================================
   AG UI-kit token pool — mirror of studio/design/ui-kit.html :root.
   Non-prefixed names (--ink-*, --text-*, --t-*, --icon-*, --space-*, …) so any
   page (dashboard, kit consumers) can reference the SAME canonical values that
   the kit gallery documents. The --ag-* block above is kept for back-compat.
   Additive only — no --ag-* value is changed.
   ========================================================================== */
:root {
  /* ── Ink surfaces ───────────────────────────────────────────────────────── */
  --ink-0: #0B0C10;  --ink-1: #14161C;  --ink-2: #1B1E26;  --ink-3: #22262F;

  /* ── Hairlines / borders ────────────────────────────────────────────────── */
  --line-section: #22262F;  --line: #272B34;  --line-strong: #343945;  --line-hover: #4A5060;

  /* ── Text levels ────────────────────────────────────────────────────────── */
  --text-hi: #F4F5F7;  --text-mid: #A9B0BB;  --text-lo: #6C7482;  --text-code: #C9CFD8;
  --text-on-accent: #FFFFFF;  --text-on-light: #0B0C10;

  /* ── Accent — one crimson voice ─────────────────────────────────────────── */
  --accent: #E23A50;  --accent-hover: #F04C61;  --accent-active: #C72E43;
  --accent-dim: rgba(226,58,80,0.14);  --accent-line: rgba(226,58,80,0.35);
  --accent-ring: rgba(226,58,80,0.18);  --accent-select: rgba(226,58,80,0.35);
  --accent-dim-hover: rgba(226,58,80,0.22);

  /* ── Semantic ───────────────────────────────────────────────────────────── */
  --ok: #3FBF7F;  --warn: #E8A33D;  --info: #4E8DF5;  --muted: #7A828E;
  --ok-wash: rgba(63,191,127,0.10);   --warn-wash: rgba(232,163,61,0.10);
  --info-wash: rgba(78,141,245,0.10);  --muted-wash: rgba(122,130,142,0.08);
  --accent-wash: rgba(226,58,80,0.11);
  --ok-soft: rgba(63,191,127,0.12);  --warn-soft: rgba(232,163,61,0.12);  --info-soft: rgba(78,141,245,0.12);

  /* ── Neutral tints ──────────────────────────────────────────────────────── */
  --tint-neutral: rgba(255,255,255,0.05);  --hover-ghost: rgba(255,255,255,0.04);  --hover-outline: rgba(255,255,255,0.03);

  /* ── Syntax palette ─────────────────────────────────────────────────────── */
  --syn-keyword: #F27E8E;  --syn-string: #7FC7A0;  --syn-function: #8FA7F0;
  --syn-literal: #E8A33D;  --syn-comment: #6C7482;  --syn-text: #C9CFD8;  --syn-gutter: #6C7482;

  /* ── Type families ──────────────────────────────────────────────────────── */
  --font-sans: 'Nata Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type ramp — level: font · size · weight · line-height · tracking · colour ─ */
  --t-hero-font: var(--font-sans);    --t-hero-size: 88px;    --t-hero-weight: 700;    --t-hero-lh: 1.02;  --t-hero-ls: -0.035em;   --t-hero-color: var(--text-hi);
  --t-display-font: var(--font-sans); --t-display-size: 72px; --t-display-weight: 700; --t-display-lh: 1.02; --t-display-ls: -0.035em; --t-display-color: var(--text-hi);
  --t-section-font: var(--font-sans); --t-section-size: 40px; --t-section-weight: 600; --t-section-lh: 1.1;  --t-section-ls: -0.02em;  --t-section-color: var(--text-hi);
  --t-h1-font: var(--font-sans);      --t-h1-size: 48px;      --t-h1-weight: 600;      --t-h1-lh: 1.1;   --t-h1-ls: -0.025em;      --t-h1-color: var(--text-hi);
  --t-h2-font: var(--font-sans);      --t-h2-size: 32px;      --t-h2-weight: 600;      --t-h2-lh: 1.2;   --t-h2-ls: -0.015em;      --t-h2-color: var(--text-hi);
  --t-h3-font: var(--font-sans);      --t-h3-size: 22px;      --t-h3-weight: 500;      --t-h3-lh: 1.3;   --t-h3-ls: 0em;           --t-h3-color: var(--text-hi);
  --t-h4-font: var(--font-sans);      --t-h4-size: 18px;      --t-h4-weight: 600;      --t-h4-lh: 1.35;  --t-h4-ls: -0.005em;      --t-h4-color: var(--text-hi);
  --t-title-font: var(--font-sans);   --t-title-size: 16px;   --t-title-weight: 600;   --t-title-lh: 1.4;  --t-title-ls: 0em;        --t-title-color: var(--text-hi);
  --t-bodylg-font: var(--font-sans);  --t-bodylg-size: 19px;  --t-bodylg-weight: 400;  --t-bodylg-lh: 1.6; --t-bodylg-ls: 0em;       --t-bodylg-color: var(--text-mid);
  --t-body-font: var(--font-sans);    --t-body-size: 17px;    --t-body-weight: 400;    --t-body-lh: 1.6; --t-body-ls: 0em;         --t-body-color: var(--text-mid);
  --t-bodysm-font: var(--font-sans);  --t-bodysm-size: 15px;  --t-bodysm-weight: 400;  --t-bodysm-lh: 1.5; --t-bodysm-ls: 0em;       --t-bodysm-color: var(--text-mid);
  --t-bodyxs-font: var(--font-sans);  --t-bodyxs-size: 13px;  --t-bodyxs-weight: 400;  --t-bodyxs-lh: 1.55; --t-bodyxs-ls: 0em;      --t-bodyxs-color: var(--text-mid);
  --t-caption-font: var(--font-sans); --t-caption-size: 12px; --t-caption-weight: 500; --t-caption-lh: 1.4; --t-caption-ls: 0em;      --t-caption-color: var(--text-lo);
  --t-micro-font: var(--font-sans);   --t-micro-size: 11px;   --t-micro-weight: 600;   --t-micro-lh: 1.3;  --t-micro-ls: 0.02em;     --t-micro-color: var(--text-lo);
  --t-monolg-font: var(--font-mono);  --t-monolg-size: 14px;  --t-monolg-weight: 400;  --t-monolg-lh: 1.6; --t-monolg-ls: 0em;       --t-monolg-color: var(--text-mid);
  --t-mono-font: var(--font-mono);    --t-mono-size: 13px;    --t-mono-weight: 400;    --t-mono-lh: 1.6; --t-mono-ls: 0em;         --t-mono-color: var(--text-mid);
  --t-monosm-font: var(--font-mono);  --t-monosm-size: 12px;  --t-monosm-weight: 400;  --t-monosm-lh: 1.5; --t-monosm-ls: 0em;       --t-monosm-color: var(--text-lo);
  --t-monoxs-font: var(--font-mono);  --t-monoxs-size: 11px;  --t-monoxs-weight: 500;  --t-monoxs-lh: 1.5; --t-monoxs-ls: 0.02em;    --t-monoxs-color: var(--text-lo);
  --t-eyebrow-font: var(--font-mono); --t-eyebrow-size: 11px; --t-eyebrow-weight: 500; --t-eyebrow-lh: 1.3; --t-eyebrow-ls: 0.14em;   --t-eyebrow-color: var(--text-lo);
  --t-label-font: var(--font-mono);   --t-label-size: 11px;   --t-label-weight: 600;   --t-label-lh: 1.3; --t-label-ls: 0.12em;     --t-label-color: var(--text-lo);

  /* ── Component micro-type (below main scale) ────────────────────────────── */
  --t-chip-size: 10px;  --t-chip-weight: 600;  --t-chip-ls: 0.1em;
  --t-mtype-size: 9.5px;  --t-meta-size: 10.5px;
  --t-formlabel-size: 14px;  --t-formlabel-weight: 500;

  /* ── Icon glyph scale — fixed sizes; a page picks one, never a raw px ────── */
  --icon-2xs: 12px;  --icon-xs: 14px;  --icon-sm: 16px;  --icon-md: 20px;  --icon-lg: 24px;  --icon-xl: 32px;
  /* ── Icon chip scale — square wrapper (radius 0) the glyph sits inside ───── */
  --chip-sm: 28px;  --chip-md: 36px;  --chip-lg: 44px;
  --icon-glyph: var(--icon-md);      /* ≡ 20px — standard Lucide glyph */
  --icon-chip: var(--chip-lg);       /* ≡ 44px — standard tinted icon chip */
  --icon-glyph-card: 17px;  --icon-chip-card: 30px;  --icon-stroke: 1.75;

  /* ── Spacing — 4-based ──────────────────────────────────────────────────── */
  --space-0: 0;  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;

  /* ── Radius — square everywhere ─────────────────────────────────────────── */
  --radius-0: 0;  --radius-1: 0;  --radius-2: 0;  --radius-pill: 0;  --radius-circle: 0;

  /* ── Border widths ──────────────────────────────────────────────────────── */
  --bw-hair: 1px;  --bw-bold: 2px;  --bw-stripe: 3px;  --bw-mid: 1.5px;

  /* ── Component micro-paddings (chip-scale, off the 4-grid) ──────────────── */
  --pad-chip-sm: 5px;  --pad-chip: 6px;  --pad-chip-lg: 8px;

  /* ── Component dimensions ───────────────────────────────────────────────── */
  --h-control: 44px;  --h-control-lg: 52px;  --h-control-sm: 34px;
  --h-role-chip: 19px;  --h-mtype-chip: 18px;  --h-level: 22px;  --h-level-card: 16px;  --h-badge: 20px;
  --check-size: 20px;  --toggle-w: 40px;  --toggle-h: 22px;  --toggle-knob: 18px;  --toggle-inset: 2px;
  --dot: 8px;  --dot-sm: 7px;
  --card-h: 182px;  --card-pad-x: 14px;  --card-row-gap: 10px;  --card-row-gap-sm: 9px;
  --card-row-head: 30px;  --card-row-task: 20px;  --card-row-foot: 18px;
  --page-max: 1180px;

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --dur-instant: 80ms;  --dur-fast: 120ms;  --dur-base: 180ms;  --dur-slow: 260ms;  --dur-slower: 400ms;
  --ease-standard: cubic-bezier(0.2,0,0,1);  --ease-emphasis: cubic-bezier(0.2,0,0.2,1);  --ease-exit: cubic-bezier(0.4,0,1,1);

  /* ── Layering + overlay ─────────────────────────────────────────────────── */
  --z-base: 0;  --z-sticky: 100;  --z-overlay: 1000;  --z-modal: 1100;  --z-tooltip: 1300;
  --overlay-strong: rgba(11,12,16,0.72);  --overlay-soft: rgba(11,12,16,0.40);

  /* ── GAP tokens (added for the dashboard kit-only conversion 2026-07-10) ─── */
  /* agent-card waiting grey — the kit --muted value, aliased so a page that
     re-points --muted at its own "dim" grey (e.g. the dashboard → --text-lo)
     does NOT disturb the card's waiting-state semantics. */
  --wait: #7A828E;
  /* skipped/cancelled node — a distinct grey from --wait + a faint wash */
  --skip: #565D6B;  --skip-wash: rgba(86,93,107,0.05);
  /* single elevation used by the agent-card hover tooltip (the one sanctioned pop) */
  --shadow-pop: 0 10px 28px -10px rgba(0,0,0,0.6);
}