@layer tokens, layout, base, components;

@layer tokens {
  :root {
    color-scheme: dark;
    --bg-main: #02070b;
    --bg-secondary: #041017;
    --bg-panel: #07141b;
    --bg-panel-soft: #091820;
    --surface-1: rgba(7, 20, 27, .96);
    --surface-2: rgba(9, 24, 32, .92);
    --surface-raised: #10232d;
    --header-surface: rgba(3, 12, 17, .96);
    --border: rgba(70, 184, 230, .22);
    --border-subtle: rgba(70, 184, 230, .12);
    --border-strong: rgba(70, 184, 230, .4);
    --border-active: rgba(62, 213, 255, .75);
    --cyan: #22d4ff;
    --cyan-bright: #42e4ff;
    --blue: #188bff;
    --purple: #a64cff;
    --purple-soft: #7140d5;
    --green: #35de93;
    --yellow: #e0ac46;
    --red: #ff6577;
    --text-primary: #f2f7fa;
    --text-secondary: #8fa8b6;
    --text-muted: #718995;
    --on-accent: #011319;
    --overlay-scrim: rgba(0, 4, 7, .78);
    --outgoing-start: #0c4463;
    --outgoing-end: #082b40;
    --incoming: #10212b;
    --theme-preview-dark: #041017;
    --theme-preview-light: #e9f3f7;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-card: 22px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --shadow-soft: 0 12px 36px rgba(0, 0, 0, .22);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, .5);
    --glow: 0 0 18px rgba(34, 212, 255, .12);
    --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --duration-press: 140ms;
    --duration-modal: 220ms;
    --duration-drawer: 260ms;
    --z-nav: 30;
    --z-header: 66;
    --z-drawer: 70;
    --z-modal: 80;
    --z-toast: 130;
    --z-update: 320;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --app-fixed-topbar-height: calc(58px + var(--safe-t));
    --ui-gutter: 16px;
    --ui-nav-height: calc(68px + var(--safe-b));
    /* Compatibility aliases keep the existing components and theme API intact. */
    --bg: var(--bg-main); --page: var(--bg-main);
    --card: var(--bg-panel); --panel: var(--bg-panel);
    --card2: var(--bg-panel-soft); --panel2: var(--bg-panel-soft);
    --line: var(--border); --stroke: var(--border);
    --text: var(--text-primary); --text2: var(--text-primary);
    --muted: var(--text-secondary); --muted2: var(--text-secondary);
    --cyan2: var(--blue); --radius: var(--radius-card);
    --ref-bg: var(--bg-main); --ref-panel: var(--bg-panel); --ref-panel-2: var(--bg-panel-soft);
    --ref-line: var(--border); --ref-line-strong: var(--border-active);
    --ref-cyan: var(--cyan); --ref-cyan-2: var(--cyan-bright);
    --ui-notice-bg: var(--bg-panel); --ui-notice-text: var(--text-primary); --ui-notice-muted: var(--text-secondary);
  }
  html[data-theme="light"] {
    color-scheme: light;
    --bg-main: #edf5f8; --bg-secondary: #e4eff3;
    --bg-panel: #f8fcfd; --bg-panel-soft: #eaf3f6;
    --surface-1: rgba(250, 253, 254, .98); --surface-2: rgba(234, 244, 248, .96);
    --surface-raised: #deecf2; --header-surface: rgba(248, 252, 253, .96);
    --border: rgba(22, 121, 154, .25); --border-subtle: rgba(22, 121, 154, .13);
    --border-strong: rgba(22, 121, 154, .4); --border-active: #087f9e;
    --cyan: #087f9e; --cyan-bright: #096e8b; --blue: #116bb0;
    --green: #147449; --red: #b72e45; --yellow: #896115;
    --purple: #7c3ac0; --purple-soft: #7442a2;
    --text-primary: #102630; --text-secondary: #47626e; --text-muted: #58727f;
    --on-accent: #ffffff; --incoming: #f8fcfd;
    --outgoing-start: #d4eaf4; --outgoing-end: #e2f0f6;
    --shadow-soft: 0 12px 36px rgba(18, 55, 71, .08);
    --shadow-modal: 0 20px 60px rgba(18, 55, 71, .2);
    --glow: 0 0 18px rgba(8, 127, 158, .1);
  }
}