/**
 * OpenCloud design tokens.
 *
 * Components consume semantic tokens instead of raw color values. Palette
 * values live here so the Vue and Naive UI layers share one visual contract.
 */
:root {
  color-scheme: light;

  --oc-font-sans: 'IBM Plex Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --oc-font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  --oc-color-canvas: #eef4f8;
  --oc-color-surface: #ffffff;
  --oc-color-surface-muted: #f8fafc;
  --oc-color-text: #0f172a;
  --oc-color-text-secondary: #334155;
  --oc-color-text-muted: #64748b;
  --oc-color-border: #d9e3ee;
  --oc-color-primary: #0f766e;
  --oc-color-primary-hover: #115e59;
  --oc-color-primary-pressed: #134e4a;
  --oc-color-info: #0369a1;
  --oc-color-success: #0f766e;
  --oc-color-warning: #d97706;
  --oc-color-danger: #dc2626;
  --oc-color-selection: rgb(15 118 110 / 18%);

  --oc-gradient-canvas:
    radial-gradient(circle at top left, rgb(12 148 136 / 12%), transparent 28%),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
  --oc-gradient-page: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 100%);
  --oc-gradient-page-soft: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 100%);
  --oc-gradient-grid:
    linear-gradient(rgb(15 23 42 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(15 23 42 / 3%) 1px, transparent 1px);

  --oc-shadow-xs: 3px 3px 0 0 rgb(15 23 42 / 6%);
  --oc-shadow-sm: 4px 4px 0 0 rgb(15 23 42 / 6%);
  --oc-shadow-md: 6px 6px 0 0 rgb(15 23 42 / 5%);
  --oc-shadow-lg: 8px 8px 0 0 rgb(15 23 42 / 8%);
  --oc-shadow-xl: 12px 12px 0 0 rgb(15 23 42 / 8%);
  --oc-shadow-sky: 4px 4px 0 0 rgb(14 165 233 / 14%);
  --oc-shadow-teal: 4px 4px 0 0 rgb(20 184 166 / 10%);

  --oc-duration-fast: 160ms;
  --oc-ease-standard: ease;
}