/*
  Agentic Runtime Platform — Console design system tokens
  Source: Console Design System (claude.ai/design project e0885419) —
  IBM Carbon v11 base (g100 dark theme, Plex type, 8px spacing scale)
  with the horizon-cyan accent spectrum. Copied verbatim from the design
  project's tokens/; keep in sync with the design project, do not fork
  values locally.
*/

/* Console — webfonts
   IBM Plex loaded from Google Fonts CDN (no binaries were provided).
   Weights: Sans 300/400/450/600 · Mono 400/600 · Serif 300/400 italic */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;450;600&family=IBM+Plex+Serif:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ============================================================
   Console — Color tokens
   Base palette: IBM Carbon v11 (gray / cyan / teal / support scales)
   Theme: g100-derived dark theme with a cool "event horizon"
   accent replacing Carbon blue as the interactive hue.
   ============================================================ */

:root {
  /* ---- Base palette (Carbon scales, exact values) ---- */
  --black: #000000;
  --white: #ffffff;

  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-40: #a8a8a8;
  --gray-50: #8d8d8d;
  --gray-60: #6f6f6f;
  --gray-70: #525252;
  --gray-80: #393939;
  --gray-90: #262626;
  --gray-100: #161616;
  --gray-90-hover: #333333;
  --gray-80-hover: #474747;
  --gray-70-hover: #636363;

  /* Horizon (Carbon cyan scale) — the event-horizon accent, cool & sleek */
  --horizon-20: #bae6ff;
  --horizon-30: #82cfff;
  --horizon-40: #33b1ff;
  --horizon-50: #1192e8;
  --horizon-60: #0072c3;
  --horizon-70: #00539a;
  --horizon-40-hover: #059fff;
  --horizon-50-hover: #0f7ec8;

  /* Support hues (Carbon) */
  --red-40: #ff8389;
  --red-50: #fa4d56;
  --green-30: #6fdc8c;
  --green-40: #42be65;
  --yellow-30: #f1c21b;
  --blue-50: #4589ff;
  --blue-40: #78a9ff;
  --purple-40: #be95ff;
  --teal-30: #3ddbd9;
  --teal-40: #08bdba;
  --cyan-40: #33b1ff;

  /* ---- Semantic: background & layers ---- */
  --void: var(--black);                       /* cinematic hero / deep space */
  --background: var(--gray-100);              /* app canvas */
  --background-hover: rgba(141, 141, 141, 0.16);
  --background-active: rgba(141, 141, 141, 0.4);
  --background-selected: rgba(141, 141, 141, 0.24);
  --background-inverse: var(--gray-10);
  --background-brand: var(--horizon-50);

  --layer-01: var(--gray-90);
  --layer-02: var(--gray-80);
  --layer-hover-01: var(--gray-90-hover);
  --layer-hover-02: var(--gray-80-hover);
  --layer-selected-01: var(--gray-80);
  --layer-accent-01: var(--gray-80);

  --field-01: var(--gray-90);
  --field-hover-01: var(--gray-90-hover);

  --overlay: rgba(0, 0, 0, 0.65);

  /* ---- Semantic: text ---- */
  --text-primary: var(--gray-10);
  --text-secondary: var(--gray-20);
  --text-helper: var(--gray-30);
  --text-placeholder: rgba(244, 244, 244, 0.4);
  --text-disabled: rgba(244, 244, 244, 0.25);
  --text-inverse: var(--gray-100);
  --text-on-color: var(--black);              /* on horizon fills */  --text-error: var(--red-40);
  --text-accent: var(--horizon-40);

  /* ---- Semantic: links & interactive ---- */
  --link-primary: var(--horizon-40);
  --link-primary-hover: var(--horizon-30);
  --interactive: var(--horizon-40);
  --interactive-hover: var(--horizon-40-hover);
  --interactive-active: var(--horizon-50);

  /* ---- Semantic: icons ---- */
  --icon-primary: var(--gray-10);
  --icon-secondary: var(--gray-30);
  --icon-accent: var(--horizon-40);
  --icon-disabled: rgba(244, 244, 244, 0.25);
  --icon-on-color: var(--black);

  /* ---- Semantic: borders ---- */
  --border-subtle-00: var(--gray-80);
  --border-subtle-01: var(--gray-70);
  --border-strong-01: var(--gray-60);
  --border-interactive: var(--horizon-40);
  --border-inverse: var(--gray-10);
  --border-disabled: rgba(141, 141, 141, 0.5);

  /* ---- Semantic: status ---- */
  --support-error: var(--red-50);
  --support-success: var(--green-40);
  --support-warning: var(--yellow-30);
  --support-info: var(--blue-50);

  /* ---- Focus ---- */
  --focus: var(--white);
  --focus-inset: var(--gray-100);

  /* ---- Layer stack semantics (L1→L3 system tiers) ---- */
  --tier-l1: var(--gray-30);      /* primitives — bare metal */
  --tier-l2: var(--teal-30);      /* platform — aurora teal */
  --tier-l3: var(--green-40);     /* applied — signal green */

  /* Highlight — the small dose of yellow. Data callouts and
     emphasis marks only; never fills, never large areas. */
  --text-highlight: var(--yellow-30);

  /* ---- Syntax (Carbon g100 syntax set, key roles) ---- */
  --syntax-comment: var(--green-40);
  --syntax-keyword: var(--blue-50);
  --syntax-string: var(--gray-10);
  --syntax-function: var(--yellow-30);
  --syntax-variable: var(--blue-40);
  --syntax-type: var(--teal-30);
  --syntax-attribute: var(--cyan-40);
  --syntax-number: #6fdc8c;
  --syntax-punctuation: var(--gray-20);
  --syntax-invalid: var(--red-50);
}

/* ============================================================
   Console — Typography tokens
   IBM Plex family (Carbon). Mono leads: labels, data, nav.
   Sans for body & headings. Serif reserved for quotations.
   ============================================================ */

:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', Courier, monospace;
  --font-serif: 'IBM Plex Serif', 'Georgia', Times, serif;

  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 450; /* @kind font */
  --fw-semibold: 600; /* @kind font */

  /* Carbon type scale (px values as rem) */
  --ts-12: 0.75rem;
  --ts-14: 0.875rem;
  --ts-16: 1rem;
  --ts-18: 1.125rem;
  --ts-20: 1.25rem;
  --ts-24: 1.5rem;
  --ts-28: 1.75rem;
  --ts-32: 2rem;
  --ts-36: 2.25rem;
  --ts-42: 2.625rem;
  --ts-54: 3.375rem;
  --ts-68: 4.25rem;
  --ts-92: 5.75rem;

  /* ---- Composite styles (family / size / weight / line-height / tracking) ---- */
  /* code-01: mono 12/1.33 +0.32px — inline code, token values */
  --type-code-01: var(--fw-regular) 0.75rem/1.33333 var(--font-mono);
  /* code-02: mono 14/1.43 +0.32px — code blocks, terminals */
  --type-code-02: var(--fw-regular) 0.875rem/1.42857 var(--font-mono);
  /* label-01: mono in Console (Carbon uses sans) 12/1.33 — eyebrows, field labels */
  --type-label-01: var(--fw-regular) 0.75rem/1.33333 var(--font-mono);
  /* body-01: sans 14/1.43 +0.16px — default body */
  --type-body-01: var(--fw-regular) 0.875rem/1.42857 var(--font-sans);
  /* body-02: sans 16/1.5 — long-form body */
  --type-body-02: var(--fw-regular) 1rem/1.5 var(--font-sans);
  /* heading-01: sans semibold 14/1.43 — dense UI headings */
  --type-heading-01: var(--fw-semibold) 0.875rem/1.42857 var(--font-sans);
  /* heading-02: sans semibold 16/1.5 */
  --type-heading-02: var(--fw-semibold) 1rem/1.5 var(--font-sans);
  /* heading-03: sans regular 20/1.4 */
  --type-heading-03: var(--fw-regular) 1.25rem/1.4 var(--font-sans);
  /* heading-04: sans regular 28/1.29 */
  --type-heading-04: var(--fw-regular) 1.75rem/1.28572 var(--font-sans);
  /* heading-05: sans regular 32/1.25 */
  --type-heading-05: var(--fw-regular) 2rem/1.25 var(--font-sans);
  /* heading-06: sans light 42/1.2 — page titles */
  --type-heading-06: var(--fw-light) 2.625rem/1.199 var(--font-sans);
  /* display-01: sans light 68/1.13 — hero display */
  --type-display-01: var(--fw-light) 4.25rem/1.13 var(--font-sans);
  /* display-02: sans light 92/1.11 — full-bleed hero */
  --type-display-02: var(--fw-light) 5.75rem/1.11 var(--font-sans);
  /* quotation: serif light italic 24/1.3 */
  --type-quotation: italic var(--fw-light) 1.5rem/1.3 var(--font-serif);

  --tracking-caption: 0.32px;
  --tracking-body: 0.16px;
  --tracking-label: 0.64px;   /* Console twist: wide-tracked mono eyebrows */
  --tracking-display: -0.96px;
}

/* ============================================================
   Console — Spacing & layout tokens
   Carbon spacing scale (8px mini-unit). Never invent values
   between steps; density is achieved by stepping down.
   ============================================================ */

:root {
  --spacing-01: 0.125rem;  /*   2px */
  --spacing-02: 0.25rem;   /*   4px */
  --spacing-03: 0.5rem;    /*   8px */
  --spacing-04: 0.75rem;   /*  12px */
  --spacing-05: 1rem;      /*  16px */
  --spacing-06: 1.5rem;    /*  24px */
  --spacing-07: 2rem;      /*  32px */
  --spacing-08: 2.5rem;    /*  40px */
  --spacing-09: 3rem;      /*  48px */
  --spacing-10: 4rem;      /*  64px */
  --spacing-11: 5rem;      /*  80px */
  --spacing-12: 6rem;      /*  96px */
  --spacing-13: 10rem;     /* 160px */

  /* Control heights (Carbon sizes) */
  --size-xs: 1.5rem;   /* 24px */
  --size-sm: 2rem;     /* 32px */
  --size-md: 2.5rem;   /* 40px — default control */
  --size-lg: 3rem;     /* 48px */
  --size-xl: 4rem;     /* 64px */

  /* Container widths */
  --container-max: 99rem;      /* 1584px */
  --container-content: 66rem;  /* 1056px */
  --container-prose: 42rem;    /* 672px  */
}

/* ============================================================
   Console — Shape & elevation tokens
   Corners are square (radius 0) everywhere. Depth comes from
   layer color and hairline borders — no glows, no decorative
   shadows; the only shadow in the system is the overlay one.
   ============================================================ */

:root {
  --radius-0: 0;               /* the default. Console is square. */
  --radius-full: 999px;        /* status dots and tag pills only */

  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;       /* selected-tab / active-rail marker */

  /* Elevation: flat by default; shadow only for overlays */
  --shadow-overlay: 0 2px 6px rgba(0, 0, 0, 0.8);

  /* Glow is retired — kept as tokens so existing references
     resolve, but they render nothing. Do not reintroduce. */
  --glow-horizon: none; /* @kind shadow */
  --glow-horizon-strong: none; /* @kind shadow */

  /* Horizon rule — 1px gradient line, the brand's signature edge */
  --gradient-horizon: linear-gradient(90deg, rgba(61, 219, 217, 0) 0%, #3ddbd9 35%, #e5f6ff 50%, #33b1ff 65%, rgba(51, 177, 255, 0) 100%); /* @kind other */
  /* Protection gradient for text over imagery */
  --gradient-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%); /* @kind other */
}

/* ============================================================
   Console — Motion tokens (Carbon motion package values)
   Productive easing for UI feedback; expressive reserved for
   hero / horizon moments. No bounces, no springs.
   ============================================================ */

:root {
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9); /* @kind other */
  --ease-productive-entrance: cubic-bezier(0, 0, 0.38, 0.9); /* @kind other */
  --ease-productive-exit: cubic-bezier(0.2, 0, 1, 0.9); /* @kind other */
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1); /* @kind other */

  --duration-fast-01: 70ms; /* @kind other */
  --duration-fast-02: 110ms; /* @kind other */
  --duration-moderate-01: 150ms; /* @kind other */
  --duration-moderate-02: 240ms; /* @kind other */
  --duration-slow-01: 400ms; /* @kind other */
  --duration-slow-02: 700ms; /* @kind other */
}