@layer reset, tokens, base, layout, components, utilities, features, overrides;

@layer tokens {
:root {
  color-scheme: light dark;
  --lumi-font-body: "Source Sans 3", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lumi-font-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --lumi-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --lumi-font-size-base: 16px;
  --lumi-heading-scale: 1;
  --lumi-control-scale: 1;

  --lumi-text: var(--ink, #182026);
  --lumi-text-muted: var(--ink-soft, #5a6872);
  --lumi-primary: var(--sea, #176b75);
  --lumi-accent: var(--sun, #e58b2b);
  --lumi-danger: var(--rose, #bd4d4d);
  --lumi-success: #23845b;
  --lumi-warning: #a96612;
  --lumi-info: #3479a8;
  --lumi-link: var(--lumi-primary);
  --lumi-surface: var(--card, #ffffff);
  --lumi-surface-subtle: var(--surface-2, #f4f7f8);
  --lumi-surface-raised: var(--surface-3, #edf2f3);
  --lumi-border: var(--border, #d8e0e3);
  --lumi-border-strong: color-mix(in srgb, var(--lumi-border) 72%, var(--lumi-text));
  --lumi-font-size-sm: 0.875rem;
  --lumi-font-size-xs: 0.8125rem;
  --lumi-font-size-md: 1rem;
  --lumi-font-size-lg: 1.125rem;
  --lumi-line-height-tight: 1.2;
  --lumi-line-height-body: 1.55;
  --lumi-line-height-relaxed: 1.7;
  --lumi-weight-regular: 400;
  --lumi-weight-medium: 600;
  --lumi-weight-bold: 700;
  --lumi-weight-heavy: 800;
  --lumi-input-bg: var(--lumi-surface);
  --lumi-input-border: var(--lumi-border);
  --lumi-input-text: var(--lumi-text);
  --lumi-button-bg: var(--lumi-primary);
  --lumi-button-text: #ffffff;
  --lumi-button-hover: color-mix(in srgb, var(--lumi-button-bg) 86%, black);
  --lumi-focus: color-mix(in srgb, var(--lumi-primary) 72%, white);
  --lumi-color-unsaved-bg: color-mix(in srgb, var(--lumi-warning) 13%, var(--lumi-surface));
  --lumi-color-unsaved-border: color-mix(in srgb, var(--lumi-warning) 45%, var(--lumi-border));
  --lumi-color-unsaved-text: var(--lumi-text);
  --lumi-color-unsaved-ring: color-mix(in srgb, var(--lumi-warning) 26%, transparent);
  --lumi-field-hover-border: color-mix(in srgb, var(--lumi-primary) 35%, var(--lumi-input-border));
  --lumi-field-focus-border: var(--lumi-focus);
  --lumi-field-invalid-bg: color-mix(in srgb, var(--lumi-danger) 8%, var(--lumi-input-bg));
  --lumi-field-invalid-border: color-mix(in srgb, var(--lumi-danger) 72%, var(--lumi-border));
  --lumi-field-warning-bg: color-mix(in srgb, var(--lumi-warning) 8%, var(--lumi-input-bg));
  --lumi-field-warning-border: color-mix(in srgb, var(--lumi-warning) 64%, var(--lumi-border));
  --lumi-field-disabled-bg: color-mix(in srgb, var(--lumi-surface-subtle) 88%, var(--lumi-border));
  --lumi-field-readonly-bg: var(--lumi-surface-subtle);
  --lumi-savebar-bg: color-mix(in srgb, var(--lumi-surface) 94%, transparent);
  --lumi-savebar-border: var(--lumi-color-unsaved-border);
  --lumi-savebar-shadow: var(--lumi-shadow-md);

  --lumi-space-scale: 1;
  --lumi-space-1: calc(0.25rem * var(--lumi-space-scale));
  --lumi-space-2: calc(0.5rem * var(--lumi-space-scale));
  --lumi-space-3: calc(0.75rem * var(--lumi-space-scale));
  --lumi-space-4: calc(1rem * var(--lumi-space-scale));
  --lumi-space-5: calc(1.5rem * var(--lumi-space-scale));
  --lumi-space-6: calc(2rem * var(--lumi-space-scale));
  --lumi-space-7: calc(3rem * var(--lumi-space-scale));
  --lumi-section-gap: var(--lumi-space-6);
  --lumi-group-gap: var(--lumi-space-3);

  --lumi-density-compact: 0.82;
  --lumi-density-default: 1;
  --lumi-density-comfortable: 1.16;

  --lumi-radius-sm: calc(var(--lumi-radius, 14px) * 0.58);
  --lumi-radius-md: var(--lumi-radius, 14px);
  --lumi-radius-lg: calc(var(--lumi-radius, 14px) * 1.42);
  --lumi-radius-pill: 999px;
  --lumi-shadow-sm: 0 1px 2px rgba(11, 20, 24, calc(var(--lumi-shadow-strength, 0.14) * 0.7));
  --lumi-shadow-md: 0 12px 34px rgba(11, 20, 24, var(--lumi-shadow-strength, 0.14));
  --lumi-shadow-lg: 0 22px 60px rgba(11, 20, 24, calc(var(--lumi-shadow-strength, 0.14) * 1.15));
  --lumi-motion-fast: 100ms;
  --lumi-motion-default: 160ms;
  --lumi-motion-slow: 260ms;
  --lumi-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --lumi-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --lumi-transition: var(--lumi-motion-default) var(--lumi-ease-standard);
  --lumi-control-height-compact: calc(2.5rem * var(--lumi-control-scale));
  --lumi-control-height: calc(2.75rem * var(--lumi-control-scale));
  --lumi-touch-target: 2.75rem;
  --lumi-content-prose: 46rem;
  --lumi-content-form: 64rem;
  --lumi-content-standard: 82rem;
  --lumi-content-wide: 100rem;
  --lumi-content-workspace: 120rem;
  --lumi-content-max: var(--lumi-content-wide);
  --lumi-sidebar-expanded: 17rem;
  --lumi-sidebar-collapsed: 5.5rem;
  --lumi-mobile-header-height: 4rem;
  --lumi-z-navigation: 30;
  --lumi-z-sticky: 40;
  --lumi-z-popover: 70;
  --lumi-z-savebar: 80;
  --lumi-z-notice: 90;
  --lumi-z-dialog: 200;
  --lumi-focus-size: 3px;
  --lumi-focus-offset: 3px;
  --lumi-dialog-scrim: rgba(5, 10, 12, 0.62);
  --lumi-code-bg: color-mix(in srgb, var(--lumi-text) 94%, var(--lumi-surface));
  --lumi-code-text: color-mix(in srgb, var(--lumi-surface) 92%, white);
  --lumi-table-header-bg: var(--lumi-surface-subtle);
  --lumi-table-row-hover: color-mix(in srgb, var(--lumi-primary) 5%, var(--lumi-surface));
  --lumi-table-row-selected: color-mix(in srgb, var(--lumi-primary) 12%, var(--lumi-surface));
  --lumi-success-bg: color-mix(in srgb, var(--lumi-success) 10%, var(--lumi-surface));
  --lumi-success-border: color-mix(in srgb, var(--lumi-success) 42%, var(--lumi-border));
  --lumi-warning-bg: color-mix(in srgb, var(--lumi-warning) 10%, var(--lumi-surface));
  --lumi-warning-border: color-mix(in srgb, var(--lumi-warning) 45%, var(--lumi-border));
  --lumi-danger-bg: color-mix(in srgb, var(--lumi-danger) 10%, var(--lumi-surface));
  --lumi-danger-border: color-mix(in srgb, var(--lumi-danger) 45%, var(--lumi-border));
  --lumi-info-bg: color-mix(in srgb, var(--lumi-info) 9%, var(--lumi-surface));
  --lumi-info-border: color-mix(in srgb, var(--lumi-info) 42%, var(--lumi-border));

  /* Compatibility aliases for existing core and plugin styles. */
  --text: var(--lumi-text);
  --muted: var(--lumi-text-muted);
  --primary: var(--lumi-primary);
  --accent: var(--lumi-accent);
  --danger: var(--lumi-danger);
  --success: var(--lumi-success);
  --warning: var(--lumi-warning);
  --info: var(--lumi-info);
  --panel: var(--lumi-surface);
  --panel-2: var(--lumi-surface-subtle);
}
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
