/*
 * MeowTeamBrowser Design Tokens
 * Canonical visual source for website, web console and desktop console.
 * Keep product behavior and role boundaries separate from visual reuse.
 */
:root {
  /* Brand */
  --meow-brand-primary: #2563eb;
  --meow-brand-primary-hover: #1d4ed8;
  --meow-brand-primary-active: #1e40af;
  --meow-brand-primary-soft: #eff5ff;
  --meow-brand-navy: #12213d;
  --meow-brand-sidebar: #161a2b;
  --meow-brand-cyan: #0ea5e9;

  /* Portal v2: control-surface visual language */
  --meow-portal-ink: #0b1220;
  --meow-portal-surface: #111c31;
  --meow-portal-surface-raised: #182742;
  --meow-portal-surface-soft: #eef3fb;
  --meow-portal-line: rgb(255 255 255 / 14%);
  --meow-portal-grid: rgb(145 180 255 / 10%);
  --meow-portal-signal: #6f9cff;
  --meow-portal-signal-cyan: #68d9ff;
  --meow-portal-max-width: 1240px;

  /* Surfaces and text */
  --meow-color-canvas: #f7f9fc;
  --meow-color-canvas-console: #f0f2f5;
  --meow-color-surface: #ffffff;
  --meow-color-surface-subtle: #f8fafc;
  --meow-color-surface-raised: #ffffff;
  --meow-color-text: #172033;
  --meow-color-text-secondary: #334155;
  --meow-color-text-muted: #667085;
  --meow-color-text-disabled: #98a2b3;
  --meow-color-text-inverse: #ffffff;
  --meow-color-border: #e5eaf2;
  --meow-color-border-strong: #cbd5e1;
  --meow-color-focus: #2563eb;

  /* Semantic states */
  --meow-state-success: #16a34a;
  --meow-state-success-text: #15803d;
  --meow-state-success-soft: #ecfdf3;
  --meow-state-warning: #d97706;
  --meow-state-warning-text: #92400e;
  --meow-state-warning-soft: #fffaeb;
  --meow-state-danger: #dc2626;
  --meow-state-danger-text: #b91c1c;
  --meow-state-danger-soft: #fef2f2;
  --meow-state-info: #0284c7;
  --meow-state-info-text: #0369a1;
  --meow-state-info-soft: #eff8ff;
  --meow-state-unknown: #b45309;
  --meow-state-unknown-text: #92400e;
  --meow-state-unknown-soft: #fff7ed;
  --meow-state-processing: #2563eb;
  --meow-state-processing-text: #1d4ed8;

  /* Typography */
  --meow-font-sans: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --meow-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --meow-font-size-xs: 12px;
  --meow-font-size-sm: 13px;
  --meow-font-size-body: 14px;
  --meow-font-size-md: 16px;
  --meow-font-size-lg: 18px;
  --meow-font-size-xl: 20px;
  --meow-font-size-2xl: 24px;
  --meow-font-size-3xl: 28px;
  --meow-font-size-4xl: 32px;
  --meow-font-size-display-sm: 40px;
  --meow-font-size-display-md: 48px;
  --meow-font-size-display-lg: 56px;
  --meow-font-weight-regular: 400;
  --meow-font-weight-medium: 500;
  --meow-font-weight-semibold: 600;
  --meow-font-weight-bold: 700;
  --meow-line-height-tight: 1.25;
  --meow-line-height-normal: 1.5;
  --meow-line-height-relaxed: 1.6;

  /* 4px spacing scale */
  --meow-space-0: 0;
  --meow-space-1: 4px;
  --meow-space-2: 8px;
  --meow-space-3: 12px;
  --meow-space-4: 16px;
  --meow-space-5: 20px;
  --meow-space-6: 24px;
  --meow-space-8: 32px;
  --meow-space-10: 40px;
  --meow-space-12: 48px;
  --meow-space-16: 64px;
  --meow-space-20: 80px;
  --meow-space-24: 96px;
  --meow-space-28: 112px;

  /* Shape */
  --meow-radius-xs: 4px;
  --meow-radius-sm: 6px;
  --meow-radius-md: 8px;
  --meow-radius-lg: 12px;
  --meow-radius-xl: 16px;
  --meow-radius-2xl: 24px;
  --meow-radius-pill: 999px;
  --meow-border-width: 1px;
  --meow-focus-ring: 0 0 0 3px rgb(37 99 235 / 20%);

  /* Elevation */
  --meow-shadow-xs: 0 1px 2px rgb(15 23 42 / 6%);
  --meow-shadow-sm: 0 4px 12px rgb(15 23 42 / 8%);
  --meow-shadow-md: 0 8px 24px rgb(15 23 42 / 10%);
  --meow-shadow-lg: 0 22px 60px rgb(15 23 42 / 7%);
  --meow-shadow-brand: 0 8px 18px rgb(37 99 235 / 14%);

  /* Layout */
  --meow-content-max-width: 1180px;
  --meow-content-gutter: 24px;
  --meow-website-header-height: 76px;
  --meow-console-sidebar-width: 200px;
  --meow-console-page-padding: 24px;
  --meow-control-height-sm: 32px;
  --meow-control-height-md: 40px;
  --meow-control-height-lg: 44px;

  /* Motion */
  --meow-motion-fast: 120ms;
  --meow-motion-base: 180ms;
  --meow-motion-slow: 260ms;
  --meow-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layering */
  --meow-z-base: 0;
  --meow-z-sticky: 10;
  --meow-z-dropdown: 1000;
  --meow-z-drawer: 1100;
  --meow-z-modal: 1200;
  --meow-z-toast: 1300;

  /* Media */
  --meow-media-ratio-wide: 16 / 9;
  --meow-media-master-width: 2560px;
  --meow-media-master-height: 1440px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --meow-motion-fast: 0ms;
    --meow-motion-base: 0ms;
    --meow-motion-slow: 0ms;
  }
}