/* ============================================================================
   AI-PROXY DESIGN TOKENS
   Three-layer architecture: Palette → Host Bridge → Semantic

   门户（portal.css）与控制台（console.css）共用的设计令牌系统。
   只包含跨产品共享的变量与最小基础样式，具体组件样式分别由各自CSS提供。
   ============================================================================ */

/* ============================================================================
   LAYER 1: PALETTE — Raw color definitions per theme
   ============================================================================ */

:root,
html.light {
  /* Base colors */
  --ae-palette-bg: #ffffff;
  --ae-palette-fg: #1f2328;
  --ae-palette-border: #d0d7de;
  --ae-palette-muted: #656d76;

  /* Semantic colors */
  --ae-palette-primary: #0969da;
  --ae-palette-success: #1a7f37;
  --ae-palette-warning: #bf8700;
  --ae-palette-danger: #cf222e;
  --ae-palette-info: #0969da;

  /* Overlay */
  --ae-palette-overlay: rgba(31, 35, 40, 0.5);
  --ae-palette-shadow: rgba(15, 23, 42, 0.08);
}

html.dark {
  /* Base colors */
  --ae-palette-bg: #0d1117;
  --ae-palette-fg: #e6edf3;
  --ae-palette-border: #30363d;
  --ae-palette-muted: #7d8590;

  /* Semantic colors */
  --ae-palette-primary: #58a6ff;
  --ae-palette-success: #3fb950;
  --ae-palette-warning: #d29922;
  --ae-palette-danger: #f85149;
  --ae-palette-info: #58a6ff;

  /* Overlay */
  --ae-palette-overlay: rgba(22, 27, 34, 0.7);
  --ae-palette-shadow: rgba(0, 0, 0, 0.25);
}

/* ============================================================================
   LAYER 2: HOST BRIDGE — Theme-agnostic base tokens
   ============================================================================ */

:root {
  /* Core tokens */
  --ae-bg: var(--ae-palette-bg);
  --ae-fg: var(--ae-palette-fg);
  --ae-border: var(--ae-palette-border);
  --ae-muted: var(--ae-palette-muted);

  /* Semantic colors */
  --ae-primary: var(--ae-palette-primary);
  --ae-success: var(--ae-palette-success);
  --ae-warning: var(--ae-palette-warning);
  --ae-danger: var(--ae-palette-danger);
  --ae-info: var(--ae-palette-info);

  /* Effects */
  --ae-overlay: var(--ae-palette-overlay);
  --ae-shadow-base: var(--ae-palette-shadow);
}

/* ============================================================================
   LAYER 3: SEMANTIC TOKENS — Surface ladder, typography, spacing
   ============================================================================ */

:root {
  /* Surface ladder — smooth tonal steps via color-mix */
  --ae-surface-0: var(--ae-bg);
  --ae-surface-1: color-mix(in srgb, var(--ae-fg) 3%, var(--ae-bg));
  --ae-surface-2: color-mix(in srgb, var(--ae-fg) 5%, var(--ae-bg));
  --ae-surface-3: color-mix(in srgb, var(--ae-fg) 7%, var(--ae-bg));
  --ae-surface-4: color-mix(in srgb, var(--ae-fg) 10%, var(--ae-bg));
  --ae-surface-5: color-mix(in srgb, var(--ae-fg) 13%, var(--ae-bg));

  /* Interactive states */
  --ae-surface: var(--ae-surface-2);
  --ae-surface-hover: var(--ae-surface-3);
  --ae-surface-active: var(--ae-surface-4);
  --ae-panel: rgba(255, 255, 255, 0.94); /* Glassmorphic panels */

  /* Text hierarchy */
  --ae-text: var(--ae-fg);
  --ae-text-primary: var(--ae-fg);
  --ae-text-secondary: color-mix(in srgb, var(--ae-fg) 70%, transparent);
  --ae-text-tertiary: color-mix(in srgb, var(--ae-fg) 50%, transparent);
  --ae-text-disabled: color-mix(in srgb, var(--ae-fg) 35%, transparent);

  /* Borders */
  --ae-border-subtle: color-mix(in srgb, var(--ae-border) 40%, transparent);
  --ae-border-default: var(--ae-border);
  --ae-border-strong: color-mix(in srgb, var(--ae-fg) 30%, var(--ae-border));

  /* Shadows */
  --ae-shadow-sm: 0 1px 2px var(--ae-shadow-base);
  --ae-shadow: 0 1px 3px var(--ae-shadow-base), 0 1px 2px -1px var(--ae-shadow-base);
  --ae-shadow-lg: 0 10px 15px -3px var(--ae-shadow-base), 0 4px 6px -4px var(--ae-shadow-base);
  --ae-shadow-xl: 0 20px 48px var(--ae-shadow-base);

  /* Typography — fluid scale */
  --ae-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ae-font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --ae-text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.875rem);
  --ae-text-sm: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
  --ae-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --ae-text-lg: clamp(1.125rem, 1.07rem + 0.275vw, 1.25rem);
  --ae-text-xl: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --ae-text-2xl: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  --ae-text-3xl: clamp(1.875rem, 1.725rem + 0.75vw, 2.25rem);

  /* Spacing — 4px grid */
  --ae-space-1: 0.25rem;
  --ae-space-2: 0.5rem;
  --ae-space-3: 0.75rem;
  --ae-space-4: 1rem;
  --ae-space-6: 1.5rem;
  --ae-space-8: 2rem;
  --ae-space-12: 3rem;
  --ae-space-16: 4rem;

  /* Radius */
  --ae-radius-sm: 0.25rem;
  --ae-radius-md: 0.5rem;
  --ae-radius-lg: 0.75rem;
  --ae-radius-xl: 1rem;
  --ae-radius-full: 9999px;

  /* Layout constraints */
  --ae-width: min(1200px, calc(100% - 32px));
  --ae-wide-width: min(1380px, calc(100% - 32px));
  --ae-sidebar-width: 250px;
}

/* ============================================================================
   PRODUCT THEMES — Accent colors per product
   ============================================================================ */

:root {
  --product-theme: #2563eb;
  --ae-accent: #2563eb;
  --ae-accent-hover: color-mix(in srgb, var(--ae-accent) 85%, var(--ae-fg));
  --ae-accent-subtle: color-mix(in srgb, var(--ae-accent) 10%, var(--ae-bg));
  --ae-primary-dark: #1d4ed8; /* Legacy compat */
}

body[data-product="augment"] {
  --product-theme: #2563eb;
  --ae-accent: #2563eb;
}

body[data-product="loneact"] {
  --product-theme: #7c3aed;
  --ae-accent: #7c3aed;
}

/* ============================================================================
   BASE STYLES & RESET
   ============================================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ae-font-sans);
  color: var(--ae-text);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 28%),
    radial-gradient(circle at 85% 16%, rgba(14, 165, 233, 0.10), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
}

html.dark body {
  background:
    radial-gradient(circle at top left, rgba(88, 166, 255, 0.08), transparent 30%),
    radial-gradient(circle at 85% 16%, rgba(88, 166, 255, 0.06), transparent 25%),
    linear-gradient(180deg, #0d1117 0%, #161b22 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 0;
}

html.dark body::before {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.5), rgba(13, 17, 23, 0));
}

a { color: inherit; }
.page-shell { position: relative; z-index: 1; }