/**
 * CloudMail semantic foundation.
 *
 * Light mode is the first visual target. Dark values establish an explicit
 * boundary for future work without claiming a completed dark interface.
 */

:root {
  --cm-font-sans: "Geist Sans", "Segoe UI", Arial, sans-serif;
  --cm-color-canvas: #f7f7f7;
  --cm-color-surface: #ffffff;
  --cm-color-surface-subtle: #fafafa;
  --cm-color-surface-hover: #f3f3f3;
  --cm-color-border: #e2e2e2;
  --cm-color-workspace-border: #e6e6e6;
  --cm-color-text: #262626;
  --cm-color-text-muted: #666666;
  --cm-color-accent: #343434;
  --cm-color-accent-strong: #262626;
  --cm-color-accent-soft: #ededed;
  --cm-color-focus: #525252;
  --cm-color-list: #fcfcfc;
  --cm-color-list-selected: #f0f0f0;
  --cm-color-search: #f5f5f5;
  --cm-color-divider: #eeeeee;
  --cm-color-on-action: #ffffff;
  --cm-color-danger: #e5484d;
  --cm-color-danger-soft: #fff0f1;
  --cm-color-warning: #d99000;
  --cm-color-tooltip-surface: #262626;
  --cm-color-tooltip-text: #ffffff;

  /* Roundcube Elastic uses a 14px root size; fixed optical sizes avoid rem drift. */
  --cm-rail-width: 56px;
  --cm-rail-control-size: 44px;
  --cm-rail-icon-size: 30px;
  --cm-rail-utility-icon-size: 22px;
  --cm-folder-pane-width: 240px;
  --cm-folder-row-height: 38px;
  --cm-folder-icon-size: 20px;
  /* Unitless optical pixels: one value drives mask/font sizes and 24px SVG scale. */
  --cm-dropdown-icon-size: 16;
  --cm-radius-control: 12px;
  --cm-radius-row: 10px;
  --cm-radius-tooltip: 0.625rem;
  --cm-radius-popover: 14px;
  --cm-radius-menu-item: 9px;
  --cm-shadow-tooltip: 0 3px 10px rgb(24 24 24 / 10%);
  --cm-shadow-popover: 0 8px 24px rgb(24 24 24 / 8%), 0 2px 6px rgb(24 24 24 / 4%);
  --cm-shadow-workspace: 0 2px 10px rgb(0 0 0 / 3%);
  --cm-motion-fast: 140ms;
}

@media screen and (min-width: 769px) {
  :root {
    --cm-rail-width: 64px;
    --cm-rail-icon-size: 28px;
    --cm-rail-utility-icon-size: 20px;
    --cm-folder-icon-size: 18px;
  }
}

html.dark-mode {
  --cm-color-canvas: #181818;
  --cm-color-surface: #242424;
  --cm-color-surface-subtle: #202020;
  --cm-color-surface-hover: #353535;
  --cm-color-border: #3b3b3b;
  --cm-color-workspace-border: var(--cm-color-border);
  --cm-color-text: #eeeeee;
  --cm-color-text-muted: #b0b0b0;
  --cm-color-accent: #dedede;
  --cm-color-accent-strong: #f0f0f0;
  --cm-color-accent-soft: #3b3b3b;
  --cm-color-focus: #c8c8c8;
  --cm-color-list: #262626;
  --cm-color-list-selected: #383838;
  --cm-color-search: #303030;
  --cm-color-divider: #333333;
  --cm-color-on-action: #202020;
  --cm-color-danger-soft: #40222b;
  --cm-color-warning: #ffcc4d;
  --cm-color-tooltip-surface: #eeeeee;
  --cm-color-tooltip-text: #262626;
  --cm-shadow-tooltip: 0 0.75rem 2rem rgb(0 0 0 / 42%);
  --cm-shadow-popover: 0 20px 56px rgb(0 0 0 / 48%), 0 2px 10px rgb(0 0 0 / 28%);
  --cm-shadow-workspace: none;
}

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