/* LIVEGG foundations. Current MVP geometry and beta palette: docs/design-system/README.md.
   This file owns shared values; component files own selectors and layout.
   --livegg-* color primitives retain the deployed beta palette. --color-* are roles.
   Legacy aliases keep the existing renderer API intact while styles migrate. */
:root {
  --livegg-color-background: #0b0b0b;
  --livegg-color-surface: #111014;
  --livegg-color-white: #ffffff;
  --livegg-color-muted: #949199;
  --livegg-color-purple: var(--livegg-color-purple-text);
  --livegg-color-border: rgb(255 255 255 / 8%);
  --livegg-color-green: #45d94d;
  --livegg-color-panel: #0b0a0d;
  --livegg-color-purple-text: #a594fd;
  --livegg-color-action-start: #513690;
  --livegg-color-action-end: #8b5cf6;
  --livegg-color-growth: #48f955;
  --livegg-color-decline: #f94848;
  --livegg-color-warning: #ffc65c;
  --livegg-color-number: #f1f1ef;
  --livegg-color-ink: #050611;
  --livegg-color-chart-line: var(--livegg-color-purple-text);

  --color-bg: var(--livegg-color-background);
  --color-surface: var(--livegg-color-panel);
  --color-raised: var(--livegg-color-surface);
  --color-text: var(--livegg-color-white);
  --color-number: var(--livegg-color-number);
  --color-muted: var(--livegg-color-muted);
  --color-prose: rgb(255 255 255 / 70%);
  --color-subtle: #817d88;
  --color-accent: var(--livegg-color-purple);
  --color-accent-text: var(--livegg-color-purple-text);
  --color-focus: var(--livegg-color-purple-text);
  --color-success: var(--livegg-color-growth);
  --color-status-healthy: var(--livegg-color-green);
  --color-danger: var(--livegg-color-decline);
  --color-warning: var(--livegg-color-warning);
  --color-on-action: var(--color-on-light);
  --color-on-primary: var(--livegg-color-white);
  --color-on-danger: var(--livegg-color-white);
  --color-on-light: var(--livegg-color-ink);
  --color-border: var(--livegg-color-border);
  --color-border-strong: #68636f;
  --color-border-hover: var(--livegg-color-muted);
  --color-field: rgb(255 255 255 / 5%);
  --color-hover: rgb(255 255 255 / 5%);
  --color-selected: rgb(255 255 255 / 10%);
  --color-badge: rgb(255 255 255 / 12%);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-success-soft: rgb(69 217 77 / 12%);
  --color-danger-soft: rgb(249 72 72 / 12%);
  --color-warning-soft: rgb(255 198 92 / 12%);
  --color-backdrop: rgb(0 0 0 / 80%);
  --color-skeleton: rgb(255 255 255 / 8%);
  --color-skeleton-shine: rgb(255 255 255 / 14%);
  --color-chart-line: var(--livegg-color-chart-line);
  --color-chart-area: var(--color-chart-line);
  --color-chart-grid: rgb(255 255 255 / 5%);
  --chart-area-opacity: .44;
  --chart-area-mid-opacity: .18;
  --chart-glow-opacity: .14;
  /* The first series shares the brand accent; other series retain distinct data identities. */
  --color-series-1: var(--color-accent);
  --color-series-2: #829cf0;
  --color-series-3: #74bdb5;
  --color-series-4: #d9b083;
  --color-series-5: #c997c6;
  --color-series-6: #6e687e;
  --color-comparison-1: var(--color-accent);
  --color-comparison-2: #6acdb7;
  --color-comparison-3: #e1af67;
  --color-comparison-4: #de88bc;
  --color-comparison-5: #7eaeeb;

  --surface-panel-sheen: linear-gradient(90deg, rgb(0 0 0 / 10%), rgb(102 102 102 / 10%));
  --surface-panel: var(--surface-panel-sheen), var(--color-surface);
  --surface-control: rgb(0 0 0 / 50%);
  --surface-header: rgb(11 10 13 / 90%);
  --surface-header-glass: rgb(11 10 13 / 64%);
  --surface-header-sheen: linear-gradient(120deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%) 45%, transparent 75%);
  --filter-header-glass: blur(20px) saturate(150%);
  /* Owner-selected beta button palette; chart and text accents stay independent. */
  --surface-action-source: linear-gradient(90deg, var(--livegg-color-action-start), var(--livegg-color-action-end));
  --surface-action: linear-gradient(rgb(0 0 0 / 6%), rgb(0 0 0 / 6%)), var(--surface-action-source);
  --surface-action-hover: linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%)), var(--surface-action-source);
  --border-panel: rgb(255 255 255 / 12%);
  --border-panel-top: rgb(255 255 255 / 24%);

  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-micro: .6875rem;
  --text-small: .75rem;
  --text-control: .875rem;
  --text-table: .8125rem;
  --text-body: .875rem;
  --text-heading: 1.25rem;
  --text-title: 2rem;
  --text-display: clamp(3rem, 5.2vw, 4.625rem);
  --text-value: 1.75rem;
  --text-record: 1.625rem;
  --text-dialog-title: 1.25rem;
  --text-article: 1.125rem;
  --line-caption: 1.333333;
  --line-body: 1.5;
  --line-article: 1.6;
  --line-table: 1.411765;
  --line-heading: 1.35;
  --line-title: 1.2;
  --line-display: 1.07;
  --line-value: 1.2;
  --tracking-heading: -.035em;

  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
  --livegg-space-4: var(--space-4);
  --livegg-space-8: var(--space-8);
  --livegg-space-10: var(--space-10);
  --livegg-space-12: var(--space-12);
  --livegg-space-16: var(--space-16);
  --livegg-space-20: var(--space-20);
  --livegg-space-24: var(--space-24);
  --livegg-space-32: var(--space-32);

  --radius-small: 8px;
  --radius-control: 12px;
  --radius-medium: 16px;
  --radius-mobile-panel: 20px;
  --radius-action-large: 22px;
  --radius-segment: 24px;
  --radius-panel: 24px;
  --radius-pill: 9999px;
  --livegg-radius-12: var(--radius-control);
  --livegg-radius-16: var(--radius-medium);
  --livegg-radius-20: var(--radius-mobile-panel);
  --control-height: 44px;
  --control-inset: 4px;
  --field-height: 44px;
  --control-icon: 20px;
  --avatar-size: 34px;
  --panel-padding: var(--space-24);
  --panel-padding-compact: var(--space-20);
  --section-gap: 32px;
  --content-width: 1440px;
  --content-max: var(--content-width);
  --content-gutter: 38px;
  --index-metric-gap: var(--space-12);
  --sidebar-width: calc((100% - 2 * var(--index-metric-gap)) * 1.05 / 4.25);
  --layout-gap: 24px;
  --header-height: 78px;
  --header-overhang: var(--space-16);
  /* header.js updates this derived value when wrapping or text sizing changes. */
  --header-measured-height: var(--header-height);
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --shadow-panel: none;
  --shadow-header: inset 0 1px 0 rgb(255 255 255 / 8%), 0 8px 32px rgb(0 0 0 / 20%);
  --shadow-popover: 0 16px 40px rgb(0 0 0 / 40%);
  --shadow-dialog: 0 24px 64px rgb(0 0 0 / 50%);
  --z-base: 0;
  --z-navigation: 30;
  --z-tooltip: 70;
  --z-dialog: 120;
  --z-select: 160;
  --z-toast: 200;
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-slow: 280ms;
  --motion-header: 500ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-ease-header: cubic-bezier(.22, 1.65, .36, 1);

  --bg: var(--color-bg);
  --panel: var(--color-raised);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --subtle: var(--color-subtle);
  --text-muted: var(--color-muted);
  --text-secondary: var(--color-muted);
  --line: var(--color-border);
  --purple: var(--color-accent-text);
  --green: var(--color-success);
  --amber: var(--color-warning);
  --accent: var(--color-accent);
  --livegg-purple: var(--color-accent-text);
  --font: var(--font-family);
  --radius: var(--radius-panel);
  --glass: var(--surface-panel-sheen);
  --glass-fill: var(--color-surface);
  --glass-solid: var(--color-raised);
  --glass-border: var(--border-panel);
  --glass-border-top: var(--border-panel-top);
  --glass-shadow: var(--shadow-panel);
  --glass-filter: none;
  --ui-control: var(--control-height);
  --ui-control-inset: var(--control-inset);
  --ui-control-inner: calc(var(--control-height) - 2 * var(--control-inset));
  --ui-panel-radius: var(--radius-panel);
  --ui-field-radius: var(--radius-control);
  --ui-panel-padding: var(--panel-padding);
  --ui-section-gap: var(--section-gap);
  --ui-gap: var(--space-12);
  --ui-label: var(--color-muted);
  --ui-hover: var(--color-hover);
  --ui-selected: var(--color-selected);
  --ui-focus: var(--color-focus);
}

/* Preserve the existing compact desktop metric gap, shared with sidebar sizing. */
@media (max-width: 1200px) {
  :root { --index-metric-gap: 9px; }
}

/* The existing compact viewport scale. Field text stays 16px to avoid zoom. */
@media (max-width: 800px) {
  :root {
    --text-title: 1.75rem;
    --text-heading: 1.125rem;
    --text-display: clamp(2.625rem, 9.8vw, 3.875rem);
    --text-value: 1.5rem;
    --text-record: 1.375rem;
    --text-article: 1rem;
    --line-display: 1.09;
    --radius-panel: var(--radius-mobile-panel);
    --panel-padding: var(--space-20);
    --panel-padding-compact: var(--space-16);
    --section-gap: 28px;
    --content-gutter: var(--space-16);
    --layout-gap: var(--space-20);
    --header-height: 128px;
    --header-overhang: var(--space-8);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-standard: 0ms; --motion-slow: 0ms; --motion-header: 0ms; }
}