/* SYNQ Liquid Glass theme and design tokens. */
:root {
  color-scheme: dark;

  --canvas: #151514;
  --canvas-deep: #0b0b0a;
  --canvas-tint: #211f1d;
  --canvas-raised: #292622;
  --text: #f7f5f1;
  --text-secondary: #c8c3bb;
  --text-tertiary: #969088;
  --accent: #f0e9df;
  --accent-strong: #d5c8ba;
  --accent-ink: #171513;
  --accent-soft: rgba(240, 233, 223, .13);
  --reflection-warm: rgba(232, 190, 157, .16);
  --reflection-cool: rgba(207, 213, 210, .09);
  --success: #76c69c;
  --warning: #e4bd72;
  --danger: #ef8f98;

  --glass-tint-clear: rgba(31, 29, 27, .30);
  --glass-tint-regular: rgba(35, 33, 30, .52);
  --glass-tint-dense: rgba(31, 29, 27, .72);
  --glass-tint-strong: rgba(25, 24, 22, .86);
  --glass-tint-elevated: rgba(38, 35, 32, .68);
  --glass-tint-solid: rgba(25, 24, 22, .96);
  --glass-tint-input: rgba(8, 8, 7, .30);
  --glass-tint-hover: rgba(255, 255, 255, .075);
  --glass-edge: rgba(255, 255, 255, .13);
  --glass-edge-strong: rgba(255, 255, 255, .24);
  --glass-specular: rgba(255, 255, 255, .42);
  --glass-shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
  --glass-shadow-panel: 0 24px 72px rgba(0, 0, 0, .28);
  --glass-shadow-elevated: 0 28px 90px rgba(0, 0, 0, .40);
  --glass-inner-edge: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .025);
  --glass-blur-clear: 12px;
  --glass-blur-regular: 22px;
  --glass-blur-dense: 34px;
  --glass-saturation: 128%;

  --radius-control: 15px;
  --radius-card: 20px;
  --radius-panel: 28px;
  --radius-hero: 36px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --control-height: 48px;
  --max-width: 1220px;

  --motion-fast: 150ms;
  --motion-material: 280ms;
  --motion-page: 360ms;
  --ease-material: cubic-bezier(.22, .76, .28, 1);
  --ease-spring: cubic-bezier(.2, .88, .24, 1.08);

  /* Compatibility aliases for established page layouts. */
  --cyan: #dfc0a8;
  --pink: #dca3ad;
  --glass: var(--glass-tint-regular);
  --glass-strong: var(--glass-tint-dense);
  --glass-float: var(--glass-tint-elevated);
  --glass-solid: var(--glass-tint-solid);
  --glass-input: var(--glass-tint-input);
  --glass-hover: var(--glass-tint-hover);
  --stroke: var(--glass-edge);
  --stroke-strong: var(--glass-edge-strong);
  --highlight: var(--glass-specular);
  --shadow-sm: var(--glass-shadow-sm);
  --shadow-md: var(--glass-shadow-panel);
  --shadow-float: var(--glass-shadow-elevated);
  --inner-light: var(--glass-inner-edge);
  --blur-sm: var(--glass-blur-clear);
  --blur: var(--glass-blur-regular);
  --blur-lg: var(--glass-blur-dense);
  --radius-xs: 12px;
  --radius-sm: var(--radius-control);
  --radius: var(--radius-panel);
  --radius-lg: var(--radius-hero);
  --radius-xl: 42px;
  --control: var(--control-height);
  --ease: var(--ease-material);
  --spring: var(--ease-spring);
  --fast: var(--motion-fast);
  --normal: var(--motion-material);
  --slow: var(--motion-page);
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #efede8;
  --canvas-deep: #e4e1da;
  --canvas-tint: #f8f6f1;
  --canvas-raised: #ffffff;
  --text: #201e1b;
  --text-secondary: #5f5a53;
  --text-tertiary: #6b655d;
  --accent: #27231f;
  --accent-strong: #4a423a;
  --accent-ink: #fffdf9;
  --accent-soft: rgba(58, 49, 41, .10);
  --reflection-warm: rgba(205, 154, 116, .16);
  --reflection-cool: rgba(156, 169, 165, .12);
  --success: #276e4a;
  --warning: #865b17;
  --danger: #ad3f4c;

  --glass-tint-clear: rgba(255, 255, 255, .30);
  --glass-tint-regular: rgba(255, 255, 255, .52);
  --glass-tint-dense: rgba(255, 255, 255, .72);
  --glass-tint-strong: rgba(255, 255, 255, .86);
  --glass-tint-elevated: rgba(255, 255, 255, .67);
  --glass-tint-solid: rgba(250, 249, 246, .97);
  --glass-tint-input: rgba(255, 255, 255, .43);
  --glass-tint-hover: rgba(255, 255, 255, .72);
  --glass-edge: rgba(55, 48, 41, .13);
  --glass-edge-strong: rgba(55, 48, 41, .24);
  --glass-specular: rgba(255, 255, 255, .94);
  --glass-shadow-sm: 0 8px 24px rgba(70, 60, 48, .09);
  --glass-shadow-panel: 0 24px 68px rgba(70, 60, 48, .13);
  --glass-shadow-elevated: 0 30px 88px rgba(70, 60, 48, .18);
  --glass-inner-edge: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(65, 55, 45, .045);
  --cyan: #765a45;
  --pink: #9c5863;
}