:root {
  /* Surfaces */
  --ds-surface-base: #f3f7fb;
  --ds-surface-secondary: #edf3f8;
  --ds-surface-raised: #ffffff;
  --ds-surface-overlay: #ffffff;
  --ds-surface-input: #e7eef5;

  /* Text */
  --ds-text-primary: #122333;
  --ds-text-secondary: #334b5e;
  --ds-text-muted: #718395;
  --ds-text-inverse: #ffffff;
  --ds-text-disabled: rgba(113, 131, 149, 0.5);

  /* Accent / Interaction */
  --ds-accent-primary: #168fd0;
  --ds-accent-hover: #137fd2;
  --ds-accent-active: #0f699e;
  --ds-accent-foreground: #ffffff;

  /* Borders / Separators */
  --ds-border-subtle: rgba(22, 143, 208, 0.08);
  --ds-border-strong: #c8d5e0;
  --ds-separator: #e1e9f0;

  /* States */
  --ds-state-hover: rgba(22, 143, 208, 0.08);
  --ds-state-pressed: rgba(22, 143, 208, 0.16);
  --ds-state-selected: rgba(22, 143, 208, 0.12);
  --ds-state-focus: rgba(22, 143, 208, 0.24);
  --ds-state-unread: #168fd0;

  /* Feedback */
  --ds-color-danger: #df4b5d;
  --ds-color-warning: #f59e0b;
  --ds-color-success: #19ad79;

  /* Overlay */
  --ds-overlay-scrim: rgba(0, 0, 0, 0.32);
  --ds-overlay-blur: blur(8px);

  /* Layout / Spacing */
  --ds-spacing-1: 4px;
  --ds-spacing-2: 8px;
  --ds-spacing-3: 12px;
  --ds-spacing-4: 16px;
  --ds-spacing-5: 20px;
  --ds-spacing-6: 24px;
  --ds-spacing-8: 32px;

  /* Layout / Radius */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-pill: 9999px;

  /* Motion */
  --ds-duration-fast: 150ms;
  --ds-duration-normal: 220ms;
  --ds-duration-slow: 300ms;
  --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Elevation */
  --ds-elevation-sm: 0 4px 12px rgba(21, 57, 82, 0.05);
  --ds-elevation-md: 0 8px 24px rgba(21, 57, 82, 0.08);
}

/* Dark Theme Mapping */
body.dark {
  /* Neutral pre-runtime fallback. Runtime tint is derived from the chosen Accent. */
  --ds-surface-base: #101111;
  --ds-surface-secondary: #202224;
  --ds-surface-raised: #18191a;
  --ds-surface-overlay: #282b2d;
  --ds-surface-input: #202224;

  --ds-text-primary: #eef3f5;
  --ds-text-secondary: #c9d3d8;
  --ds-text-muted: #96a4ad;
  --ds-text-inverse: #111315;
  --ds-text-disabled: rgba(150, 164, 173, 0.5);

  --ds-border-subtle: rgba(180, 188, 194, 0.09);
  --ds-border-strong: rgba(180, 188, 194, 0.16);
  --ds-separator: rgba(180, 188, 194, 0.11);

  --ds-state-hover: rgba(255, 255, 255, 0.055);
  --ds-state-pressed: rgba(255, 255, 255, 0.095);
  --ds-state-selected: rgba(255, 255, 255, 0.075);

  --ds-overlay-scrim: rgba(0, 0, 0, 0.62);

  --ds-elevation-sm: 0 4px 12px rgba(0, 0, 0, 0.28);
  --ds-elevation-md: 0 8px 24px rgba(0, 0, 0, 0.46);
}

/* AMOLED Theme Mapping (Highest Specificity) */
body.amoled, body.dark.amoled {
  --ds-surface-base: #000000;
  --ds-surface-secondary: #050505;
  --ds-surface-raised: #0a0a0a;
  --ds-surface-overlay: #121212;
  --ds-surface-input: #0a0a0a;

  --ds-border-subtle: rgba(255, 255, 255, 0.08);
  --ds-border-strong: rgba(255, 255, 255, 0.12);
  --ds-separator: rgba(255, 255, 255, 0.1);

  --ds-state-hover: rgba(255, 255, 255, 0.08);
  --ds-state-pressed: rgba(255, 255, 255, 0.12);
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0ms !important;
    --ds-duration-normal: 0ms !important;
    --ds-duration-slow: 0ms !important;
  }
}


/* ==========================================================================
 * E3 Theme Studio R1 — dynamic semantic token bridge
 * These mappings intentionally live on body so the currently applied Theme
 * Studio variables win over legacy body.dark / body[data-palette] declarations.
 * ========================================================================== */
body{
  --ds-surface-base:var(--bg);
  --ds-surface-secondary:var(--surface-2);
  --ds-surface-raised:var(--surface);
  --ds-surface-overlay:var(--surface-3);
  --ds-surface-input:var(--surface-2);

  --ds-text-primary:var(--text);
  --ds-text-secondary:var(--text-2);
  --ds-text-muted:var(--muted);
  --ds-text-inverse:var(--accent-contrast,#fff);
  --ds-text-disabled:color-mix(in srgb,var(--muted) 50%,transparent);

  --ds-accent-primary:var(--primary);
  --ds-accent-hover:color-mix(in srgb,var(--primary) 88%,var(--text));
  --ds-accent-active:color-mix(in srgb,var(--primary) 76%,#071116);
  --ds-accent-foreground:var(--accent-contrast,#fff);

  --ds-border-subtle:color-mix(in srgb,var(--primary) 7%,var(--line));
  --ds-border-strong:color-mix(in srgb,var(--primary) 15%,var(--line));
  --ds-separator:var(--line);

  --ds-state-hover:color-mix(in srgb,var(--primary) 7%,transparent);
  --ds-state-pressed:color-mix(in srgb,var(--primary) 13%,transparent);
  --ds-state-selected:color-mix(in srgb,var(--primary) 11%,var(--surface));
  --ds-state-focus:color-mix(in srgb,var(--primary) 24%,transparent);
  --ds-state-unread:var(--primary);

  --ds-color-danger:var(--danger);
  --ds-color-warning:var(--warning,#f2b84b);
  --ds-color-success:var(--success);
  --ds-color-info:var(--info,#58a8f5);
}

/* ==========================================================================
 * E3 Adaptive Accent-Tinted Dark System — chromatic morph engine
 * Registered colour tokens let Chromium/WebView interpolate the actual theme
 * variables instead of flashing from one palette to another. Browsers that do
 * not support @property simply fall back to the existing instant switch.
 * ========================================================================== */
@property --bg{syntax:"<color>";inherits:true;initial-value:#0b1016}
@property --surface{syntax:"<color>";inherits:true;initial-value:#111920}
@property --surface-2{syntax:"<color>";inherits:true;initial-value:#17222b}
@property --surface-3{syntax:"<color>";inherits:true;initial-value:#1e2b35}
@property --primary{syntax:"<color>";inherits:true;initial-value:#168fd0}
@property --primary-2{syntax:"<color>";inherits:true;initial-value:#15b8b0}
@property --primary-soft{syntax:"<color>";inherits:true;initial-value:#163a51}
@property --primary-ink{syntax:"<color>";inherits:true;initial-value:#cbeeff}
@property --text{syntax:"<color>";inherits:true;initial-value:#eef3f5}
@property --text-2{syntax:"<color>";inherits:true;initial-value:#c9d3d8}
@property --muted{syntax:"<color>";inherits:true;initial-value:#96a4ad}
@property --line{syntax:"<color>";inherits:true;initial-value:#2b3944}
@property --mine{syntax:"<color>";inherits:true;initial-value:#163a51}
@property --bubble{syntax:"<color>";inherits:true;initial-value:#151f27}

html.g114-theme-morphing,
body.g114-theme-morphing{
  transition:
    --bg 320ms var(--ds-ease-standard),
    --surface 320ms var(--ds-ease-standard),
    --surface-2 320ms var(--ds-ease-standard),
    --surface-3 320ms var(--ds-ease-standard),
    --primary 300ms var(--ds-ease-standard),
    --primary-2 300ms var(--ds-ease-standard),
    --primary-soft 320ms var(--ds-ease-standard),
    --primary-ink 300ms var(--ds-ease-standard),
    --text 280ms var(--ds-ease-standard),
    --text-2 280ms var(--ds-ease-standard),
    --muted 280ms var(--ds-ease-standard),
    --line 320ms var(--ds-ease-standard),
    --mine 320ms var(--ds-ease-standard),
    --bubble 320ms var(--ds-ease-standard);
}

@media(prefers-reduced-motion:reduce){
  html.g114-theme-morphing,body.g114-theme-morphing{transition:none!important}
}
body[data-g114-motion="reduced"].g114-theme-morphing{transition:none!important}