/* Teleion design tokens. Generated by brand/tokens/build.mjs from tokens.json: edit the JSON, then run the build. */
/* Light is the default. Put data-theme="dark" on <html> or on any section to turn it dark; data-theme="light" turns a section back. */
/* Sizes marked fluid grow from their phone value at 390 pixels wide to their full value at 1440. */

:root {
  --color-white: #FFFFFF;
  --color-grey-50: #F5F5F4;
  --color-grey-100: #ECEDEE;
  --color-grey-200: #E3E4E6;
  --color-grey-300: #B4B7BC;
  --color-grey-400: #8A8E94;
  --color-grey-500: #6B6F76;
  --color-grey-600: #4A4D53;
  --color-grey-700: #2A2C30;
  --color-grey-800: #1C1E21;
  --color-grey-900: #141518;
  --color-grey-950: #0B0C0E;
  --color-neon: #C6FF33;
  --color-green-50: #E7F6EC;
  --color-green-300: #86E0A6;
  --color-green-800: #14532D;
  --color-green-950: #0E2A19;
  --color-amber-50: #FEF3E2;
  --color-amber-300: #F5B961;
  --color-amber-800: #7A3E00;
  --color-amber-950: #2E1E05;
  --color-red-50: #FDECEC;
  --color-red-300: #F59A9A;
  --color-red-800: #8A1C1C;
  --color-red-950: #2E0F10;
  --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --size-display: clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem);
  --size-heading-1: clamp(2rem, 1.8143rem + 0.7619vw, 2.5rem);
  --size-heading-2: clamp(1.5rem, 1.4071rem + 0.381vw, 1.75rem);
  --size-body: 1.0625rem;
  --size-small: 0.875rem;
  --size-label: 0.8125rem;
  --leading-display: 1.05;
  --leading-heading-1: 1.1;
  --leading-heading-2: 1.2;
  --leading-body: 1.55;
  --leading-small: 1.5;
  --leading-label: 1.4;
  --tracking-heading: -0.035em;
  --tracking-normal: 0em;
  --text-display: var(--weight-semibold) var(--size-display)/var(--leading-display) var(--font-sans);
  --text-display-tracking: var(--tracking-heading);
  --text-heading-1: var(--weight-semibold) var(--size-heading-1)/var(--leading-heading-1) var(--font-sans);
  --text-heading-1-tracking: var(--tracking-heading);
  --text-heading-2: var(--weight-semibold) var(--size-heading-2)/var(--leading-heading-2) var(--font-sans);
  --text-heading-2-tracking: var(--tracking-heading);
  --text-body: var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-sans);
  --text-body-tracking: var(--tracking-normal);
  --text-body-strong: var(--weight-medium) var(--size-body)/var(--leading-body) var(--font-sans);
  --text-body-strong-tracking: var(--tracking-normal);
  --text-small: var(--weight-regular) var(--size-small)/var(--leading-small) var(--font-sans);
  --text-small-tracking: var(--tracking-normal);
  --text-label: var(--weight-regular) var(--size-label)/var(--leading-label) var(--font-mono);
  --text-label-tracking: var(--tracking-normal);
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --border-hairline: 1px;
  --border-focus: 2px;
  --border-focus-offset: 2px;
  --layout-gutter: clamp(16px, 4.1143px + 3.0476vw, 48px);
  --layout-section: clamp(64px, 40.2286px + 6.0952vw, 128px);
  --layout-content: 1200px;
  --layout-measure: 68ch;
}

/* A themed element also takes its theme's text colour; its background stays yours to set. */
:root, [data-theme="light"] {
  color-scheme: light;
  color: var(--color-text-primary);
  --color-bg-page: var(--color-grey-50);
  --color-bg-surface: var(--color-white);
  --color-bg-subtle: var(--color-grey-100);
  --color-bg-inverse: var(--color-grey-950);
  --color-text-primary: var(--color-grey-950);
  --color-text-secondary: var(--color-grey-500);
  --color-text-disabled: var(--color-grey-300);
  --color-text-inverse: var(--color-white);
  --color-text-on-signal: var(--color-grey-950);
  --color-border-default: var(--color-grey-200);
  --color-border-strong: var(--color-grey-400);
  --color-border-focus: var(--color-grey-950);
  --color-signal: var(--color-neon);
  --color-status-success-bg: var(--color-green-50);
  --color-status-success-text: var(--color-green-800);
  --color-status-warning-bg: var(--color-amber-50);
  --color-status-warning-text: var(--color-amber-800);
  --color-status-danger-bg: var(--color-red-50);
  --color-status-danger-text: var(--color-red-800);
}

[data-theme="dark"] {
  color-scheme: dark;
  color: var(--color-text-primary);
  --color-bg-page: var(--color-grey-950);
  --color-bg-surface: var(--color-grey-900);
  --color-bg-subtle: var(--color-grey-800);
  --color-bg-inverse: var(--color-white);
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-grey-400);
  --color-text-disabled: var(--color-grey-600);
  --color-text-inverse: var(--color-grey-950);
  --color-text-on-signal: var(--color-grey-950);
  --color-border-default: var(--color-grey-700);
  --color-border-strong: var(--color-grey-500);
  --color-border-focus: var(--color-white);
  --color-signal: var(--color-neon);
  --color-status-success-bg: var(--color-green-950);
  --color-status-success-text: var(--color-green-300);
  --color-status-warning-bg: var(--color-amber-950);
  --color-status-warning-text: var(--color-amber-300);
  --color-status-danger-bg: var(--color-red-950);
  --color-status-danger-text: var(--color-red-300);
}

/* Declared again on every themed element so that they pick up that element's theme. */
:root, [data-theme] {
  --control-height: 44px;
  --button-primary-bg: var(--color-bg-inverse);
  --button-primary-text: var(--color-text-inverse);
  --button-secondary-bg: var(--color-bg-surface);
  --button-secondary-text: var(--color-text-primary);
  --button-secondary-border: var(--color-border-strong);
  --button-radius: var(--radius-8);
  --button-padding-x: var(--space-24);
  --field-bg: var(--color-bg-surface);
  --field-text: var(--color-text-primary);
  --field-placeholder: var(--color-text-secondary);
  --field-border: var(--color-border-strong);
  --field-radius: var(--radius-8);
  --field-padding-x: var(--space-12);
  --card-bg: var(--color-bg-surface);
  --card-border: var(--color-border-default);
  --card-radius: var(--radius-12);
  --card-padding: var(--space-24);
  --panel-bg: var(--color-bg-surface);
  --panel-border: var(--color-border-default);
  --panel-radius: var(--radius-20);
  --panel-padding: var(--space-32);
  --tag-bg: var(--color-bg-subtle);
  --tag-text: var(--color-text-primary);
  --tag-radius: var(--radius-4);
  --tag-height: var(--space-24);
  --tag-padding-x: var(--space-8);
  --thinking-bg: var(--color-signal);
  --thinking-text: var(--color-text-on-signal);
  --thinking-radius: var(--radius-4);
}