/* Design tokens shared across the whole browser UI.
   This file defines colors, spacing, typography, radii, and timing values that
   the other CSS files reuse. */
:root {
  color-scheme: light;

  --font-body: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --font-display: "Cinzel", "Iowan Old Style", serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --color-bg: #f4f7f8;
  --color-surface: #fdfefe;
  --color-surface-2: #f0f5f8;
  --color-border: rgba(15, 23, 42, 0.1);
  --color-border-strong: rgba(15, 23, 42, 0.17);
  --color-text: #0f172a;
  --color-muted: #586c83;

  --color-accent: #287c83;
  --color-accent-weak: rgba(46, 111, 114, 0.14);
  --color-accent-strong: #216870;

  --color-success: #14866d;
  --color-warning: #b66d00;
  --color-danger: #c24747;


  /* Pearl and orbital mint: one surface family for both consoles. */
  --surface-pearl: linear-gradient(145deg, #ffffff, #f3f7fa);
  --surface-mint: linear-gradient(125deg, #f4fffc 0%, #e0f5ef 56%, #ccece6 100%);
  --surface-mint-hover: linear-gradient(125deg, #eefffb, #c2e9e1);
  --surface-welcome: linear-gradient(140deg, #f7fbfc, #edf7f8);
  --border-mint: #a7d5d0;
  --border-mint-hover: #66b4ac;
  --text-heading: #183a4c;
  --text-supporting: #4d7379;
  --shadow-inset: inset 0 1px 0 #ffffff;
  --shadow-mint: inset 0 1px 0 #ffffff, 0 4px 18px #2359610d;
  --action-primary: linear-gradient(150deg, #5caeb1, #267781);
  --action-walkthrough: linear-gradient(145deg, #77b4d9, #326da0);
  --action-text: #ffffff;
  --walkthrough-border: #8bbfdd;
  --chart-overall: #287b88;
  --chart-easy: #2e7764;
  --chart-medium: #5576ad;
  --chart-hard: #a76837;
  --chart-unknown: #747f8d;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 22px 48px rgba(15, 23, 42, 0.15);

  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.9rem;

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 250ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --focus-ring: rgba(46, 111, 114, 0.38);
  --overlay-bg: rgba(15, 23, 42, 0.44);

  --chat-max-width: 1120px;
  --reading-max-width: 76ch;
  --sidebar-width: clamp(320px, 23vw, 360px);
  --sidebar-collapsed-width: 90px;
  --composer-height: 152px;
  --owen-font-scale: 1;
  --owen-ui-fit-scale: 1;
  --owen-ui-fit-active: 0;
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);

  --landing-bg: radial-gradient(ellipse at 14% 18%, #ccece666, transparent 48%),
    radial-gradient(ellipse at 86% 82%, #cce8ef70, transparent 48%),
    var(--surface-welcome);
  --landing-card: var(--surface-pearl);
  --landing-border: var(--border-mint);
  --landing-glow: 0 24px 64px #23596114;
  --landing-icon-fill: linear-gradient(145deg, #7dbbb9 8%, var(--color-accent) 52%, var(--text-heading) 100%);
  --landing-wordmark-shift: -2px;
  --landing-lockup-shift: -6px;
  --landing-cta-height: clamp(152px, 18vw, 194px);
  --landing-cta-min: 260px;
  --landing-cta-max: 328px;
  --landing-cta-width: clamp(var(--landing-cta-min), 31vw, var(--landing-cta-max));
  --landing-cta-text-max: 264px;
  --landing-cta-mobile-max: 360px;
  --landing-cta-radius: var(--radius-lg);
  --landing-cta-icon-width: clamp(150px, 18vw, 212px);
  --landing-cta-icon-height: clamp(112px, 14vw, 152px);
  --landing-cta-icon-top: 22%;
  --landing-cta-title-overlap: clamp(18px, 2.6vw, 32px);
  --landing-cta-stack-shift: clamp(18px, 2.8vw, 30px);
  --landing-cta-stack-lower: clamp(16px, 2.6vw, 28px);
  --landing-cta-stack-gap: 16px;
  --landing-cta-padding-block: 10px;
  --landing-cta-padding-inline: 16px;
  --landing-cta-text-block: 52px;
  --landing-cta-title-size: clamp(20px, 2.4vw, 26px);
  --landing-cta-subtitle-size: clamp(12px, 1.4vw, 15px);
  --landing-cta-shadow: var(--shadow-inset), 0 8px 24px #23596114;
  --landing-cta-chip-lift: 8px;
  --landing-cta-text-color: var(--color-text);
  --landing-cta-subtitle-color: var(--color-muted);
  --landing-cta-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.94));
  --landing-cta-hover-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 248, 0.96));
  --landing-cta-border: rgba(46, 111, 114, 0.2);
  --landing-cta-hover-border: rgba(46, 111, 114, 0.36);
  --landing-cta-primary-bg: linear-gradient(150deg, rgba(46, 111, 114, 0.94), rgba(36, 93, 97, 0.92));
  --landing-cta-primary-hover-bg: linear-gradient(150deg, rgba(46, 111, 114, 0.98), rgba(30, 83, 88, 0.94));
  --landing-cta-primary-border: rgba(46, 111, 114, 0.52);
  --landing-cta-primary-hover-border: rgba(36, 93, 97, 0.7);
  --landing-cta-secondary-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.94));
  --landing-cta-secondary-hover-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 248, 0.96));
  --landing-cta-secondary-border: rgba(15, 23, 42, 0.14);
  --landing-cta-secondary-hover-border: rgba(46, 111, 114, 0.34);
  --icon-nudge-y: 2px;
  --landing-cta-text-gap: 4px;
  --landing-cta-text-shift: var(--icon-nudge-y);
  --landing-cta-text-drop: clamp(18px, 2vw, 26px);
  --landing-cta-text-hover-nudge: 0;

  --robot-static-scale: 1;
  --robot-static-x: 0;
  --robot-static-y: 0;
  --robot-layer-scale: 1;
  --robot-layer-x: 0;
  --robot-layer-y: 0;
  --robot-anim-scale: 1;
  --robot-anim-x: 0;
  --robot-anim-y: 0;
  --robot-anim-mask: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 18%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 255, 255, 0.3) 78%, transparent 100%);

  --conv-row-h: 48px;
  --conv-row-gap: var(--space-2);
  --conv-list-max-h: 320px;

  --pipeline-grid-gap: var(--space-5);
  --pipeline-card-padding: var(--space-5);
  --pipeline-card-gap: var(--space-3);
  --pipeline-card-header-gap: var(--space-3);
  --pipeline-actions-gap: var(--space-2);

  /* compatibility aliases for existing selectors */
  --app-bg: var(--color-bg);
  --bg: var(--color-bg);
  --bg-page: var(--color-bg);
  --bg-app: var(--color-bg);
  --bg-app-2: var(--color-surface-2);
  --bg-surface: var(--color-surface);
  --bg-surface-alt: var(--color-surface-2);
  --bg-surface-hover: color-mix(in srgb, var(--color-surface) 84%, var(--color-accent) 16%);
  --bg-soft: var(--color-surface-2);
  --bg-muted: var(--color-surface-2);
  --surface-input: var(--color-surface);
  --card: var(--color-surface);
  --card-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-accent) 10%);
  --surface-canvas: var(--color-surface);

  --text: var(--color-text);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-muted);
  --text-soft: color-mix(in srgb, var(--color-muted) 88%, #fdfefe 12%);
  --text-muted: var(--color-muted);
  --text-placeholder: color-mix(in srgb, var(--color-muted) 78%, #fdfefe 22%);

  --border: var(--color-border);
  --border-strong: var(--color-border-strong);

  --primary: var(--color-accent);
  --primary-dark: var(--color-accent-strong);
  --primary-soft: var(--color-accent-weak);

  --shadow-soft: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 75%, transparent);
  --panel-shadow: var(--shadow-md);

  --scrollbar-track: transparent;
  --scrollbar-thumb: #fdfefe;
  --scrollbar-thumb-hover: #fdfefe;
  --scrollbar-thumb-active: #fdfefe;
  --scrollbar-thumb-border: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-border-hover: rgba(0, 0, 0, 0.25);
  --scrollbar-thumb-border-active: rgba(0, 0, 0, 0.25);

  --response-pill-bg: color-mix(in srgb, var(--color-surface) 85%, var(--color-accent) 15%);
  --response-pill-bg-hover: color-mix(in srgb, var(--color-surface) 78%, var(--color-accent) 22%);
  --response-pill-bg-active: color-mix(in srgb, var(--color-surface) 70%, var(--color-accent) 30%);
  --response-pill-border: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --response-pill-border-active: color-mix(in srgb, var(--color-accent) 58%, transparent);
  --response-pill-text: var(--color-text);
  --response-pill-shadow: var(--shadow-sm);

  --ref-panel-bg: color-mix(in srgb, var(--color-surface) 86%, var(--color-accent) 14%);
  --ref-panel-border: color-mix(in srgb, var(--color-accent) 38%, transparent);
  --ref-panel-text: var(--color-muted);
  --ref-chip-bg: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --ref-chip-border: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --ref-chip-border-active: color-mix(in srgb, var(--color-accent) 60%, transparent);
  --ref-chip-text: var(--color-text);
  --ref-chip-hover: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --ref-chip-active: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --ref-detail-bg: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --ref-toggle-bg: color-mix(in srgb, var(--color-accent) 16%, transparent);
  --ref-toggle-border: color-mix(in srgb, var(--color-accent) 44%, transparent);
  --ref-toggle-text: var(--color-text);
  --term-highlight-bg: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --term-highlight-border: color-mix(in srgb, var(--color-accent) 44%, transparent);

  --owen-warm-white: var(--color-surface);
  --owen-warm-white-soft: var(--color-surface-2);
}

:root[data-theme="dark"],
body.theme-dark {
  color-scheme: dark;

  --surface-pearl: linear-gradient(145deg, #172a3b, #102131);
  --surface-mint: linear-gradient(125deg, #1c3642, #21474c 56%, #285758);
  --surface-mint-hover: linear-gradient(125deg, #23444d, #306660);
  --surface-welcome: linear-gradient(140deg, #102333, #14333d);
  --border-mint: #467c80;
  --border-mint-hover: #78bbb3;
  --text-heading: #e6fbf6;
  --text-supporting: #b0d6d1;
  --shadow-inset: inset 0 1px 0 #a5d9d91c;
  --shadow-mint: inset 0 1px 0 #a5d9d91c, 0 4px 18px #00000024;
  --action-primary: linear-gradient(150deg, #438f98, #25646e);
  --action-walkthrough: linear-gradient(145deg, #377ea8, #244f7d);
  --walkthrough-border: #609abb;
  --chart-overall: #7acbd3;
  --chart-easy: #82cbae;
  --chart-medium: #9db7ec;
  --chart-hard: #e3b17e;
  --chart-unknown: #b2bbc9;


  --color-bg: #0b1220;
  --color-surface: #0f1b2d;
  --color-surface-2: #0c1626;
  --color-border: rgba(148, 163, 184, 0.14);
  --color-border-strong: rgba(148, 163, 184, 0.26);
  --color-text: #eaf0f8;
  --color-muted: #9aa7b8;

  --color-accent: #4da1a5;
  --color-accent-weak: rgba(77, 161, 165, 0.24);
  --color-accent-strong: #70c2c6;

  --color-success: #2dad89;
  --color-warning: #df9a37;
  --color-danger: #e07a7a;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 16px 34px rgba(0, 0, 0, 0.44);
  --shadow-lg: 0 26px 56px rgba(0, 0, 0, 0.6);

  --focus-ring: rgba(77, 161, 165, 0.55);
  --overlay-bg: rgba(3, 8, 18, 0.64);

  --landing-bg: radial-gradient(circle at 14% 16%, rgba(40, 83, 104, 0.42), transparent 42%),
    radial-gradient(circle at 84% 12%, rgba(21, 47, 70, 0.54), transparent 42%),
    linear-gradient(140deg, #081022, #0c1628 50%, #0b1425);
  --landing-card: linear-gradient(145deg, rgba(11, 21, 37, 0.9), rgba(9, 17, 31, 0.94));
  --landing-border: rgba(148, 163, 184, 0.2);
  --landing-glow: 0 30px 70px rgba(0, 0, 0, 0.52);
  --landing-cta-text-color: var(--color-text);
  --landing-cta-subtitle-color: color-mix(in srgb, var(--color-muted) 86%, #ffffff 14%);
  --landing-cta-bg: linear-gradient(150deg, rgba(15, 27, 45, 0.95), rgba(12, 23, 40, 0.96));
  --landing-cta-hover-bg: linear-gradient(150deg, rgba(18, 34, 55, 0.97), rgba(14, 26, 44, 0.98));
  --landing-cta-border: rgba(148, 163, 184, 0.22);
  --landing-cta-hover-border: rgba(112, 194, 198, 0.44);
  --landing-cta-secondary-bg: linear-gradient(150deg, rgba(15, 27, 45, 0.95), rgba(12, 23, 40, 0.96));
  --landing-cta-secondary-hover-bg: linear-gradient(150deg, rgba(18, 34, 55, 0.97), rgba(14, 26, 44, 0.98));
  --landing-cta-secondary-border: rgba(148, 163, 184, 0.24);
  --landing-cta-secondary-hover-border: rgba(112, 194, 198, 0.44);
  --landing-cta-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);

  --robot-anim-mask: linear-gradient(90deg, transparent 0%, rgba(111, 187, 206, 0.22) 25%, rgba(131, 217, 223, 0.56) 50%, rgba(111, 187, 206, 0.22) 75%, transparent 100%);

  /* Rebind aliases when the legacy body theme is used without a root theme. */
  /* compatibility aliases for existing selectors */
  --app-bg: var(--color-bg);
  --bg: var(--color-bg);
  --bg-page: var(--color-bg);
  --bg-app: var(--color-bg);
  --bg-app-2: var(--color-surface-2);
  --bg-surface: var(--color-surface);
  --bg-surface-alt: var(--color-surface-2);
  --bg-surface-hover: color-mix(in srgb, var(--color-surface) 84%, var(--color-accent) 16%);
  --bg-soft: var(--color-surface-2);
  --bg-muted: var(--color-surface-2);
  --surface-input: var(--color-surface);
  --card: var(--color-surface);
  --card-strong: color-mix(in srgb, var(--color-surface) 90%, var(--color-accent) 10%);
  --surface-canvas: var(--color-surface);

  --text: var(--color-text);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-muted);
  --text-soft: color-mix(in srgb, var(--color-muted) 88%, #fdfefe 12%);
  --text-muted: var(--color-muted);
  --text-placeholder: color-mix(in srgb, var(--color-muted) 78%, #fdfefe 22%);

  --border: var(--color-border);
  --border-strong: var(--color-border-strong);

  --primary: var(--color-accent);
  --primary-dark: var(--color-accent-strong);
  --primary-soft: var(--color-accent-weak);

  --shadow-soft: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 75%, transparent);
  --panel-shadow: var(--shadow-md);

  --scrollbar-track: transparent;
  --scrollbar-thumb: #fdfefe;
  --scrollbar-thumb-hover: #fdfefe;
  --scrollbar-thumb-active: #fdfefe;
  --scrollbar-thumb-border: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-border-hover: rgba(0, 0, 0, 0.25);
  --scrollbar-thumb-border-active: rgba(0, 0, 0, 0.25);

  --response-pill-bg: color-mix(in srgb, var(--color-surface) 85%, var(--color-accent) 15%);
  --response-pill-bg-hover: color-mix(in srgb, var(--color-surface) 78%, var(--color-accent) 22%);
  --response-pill-bg-active: color-mix(in srgb, var(--color-surface) 70%, var(--color-accent) 30%);
  --response-pill-border: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --response-pill-border-active: color-mix(in srgb, var(--color-accent) 58%, transparent);
  --response-pill-text: var(--color-text);
  --response-pill-shadow: var(--shadow-sm);

  --ref-panel-bg: color-mix(in srgb, var(--color-surface) 86%, var(--color-accent) 14%);
  --ref-panel-border: color-mix(in srgb, var(--color-accent) 38%, transparent);
  --ref-panel-text: var(--color-muted);
  --ref-chip-bg: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --ref-chip-border: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --ref-chip-border-active: color-mix(in srgb, var(--color-accent) 60%, transparent);
  --ref-chip-text: var(--color-text);
  --ref-chip-hover: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --ref-chip-active: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --ref-detail-bg: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --ref-toggle-bg: color-mix(in srgb, var(--color-accent) 16%, transparent);
  --ref-toggle-border: color-mix(in srgb, var(--color-accent) 44%, transparent);
  --ref-toggle-text: var(--color-text);
  --term-highlight-bg: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --term-highlight-border: color-mix(in srgb, var(--color-accent) 44%, transparent);

  --owen-warm-white: var(--color-surface);
  --owen-warm-white-soft: var(--color-surface-2);
}