/**
 * 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;

  /*
   * Tailwind compatibility palettes.
   * Existing teal/emerald utilities intentionally resolve to OpenCloud's
   * fresh eucalyptus and leaf colors instead of Tailwind's vivid defaults.
   */
  --color-teal-50: #f2faf6;
  --color-teal-100: #ddf2e6;
  --color-teal-200: #bce4cf;
  --color-teal-300: #8fceb0;
  --color-teal-400: #60b18d;
  --color-teal-500: #438f71;
  --color-teal-600: #34745d;
  --color-teal-700: #2d5f4e;
  --color-teal-800: #274c40;
  --color-teal-900: #213e35;

  --color-emerald-50: #f4faef;
  --color-emerald-100: #e5f3d9;
  --color-emerald-200: #cce7b7;
  --color-emerald-300: #a8d58d;
  --color-emerald-400: #7fbc63;
  --color-emerald-500: #609d48;
  --color-emerald-600: #4d7f3b;
  --color-emerald-700: #3f6633;
  --color-emerald-800: #35522c;
  --color-emerald-900: #2d4427;

  --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-text-disabled: #94a3b8;
  --oc-color-border: #d9e3ee;
  --oc-color-primary: #34745d;
  --oc-color-primary-hover: #2d5f4e;
  --oc-color-primary-pressed: #274c40;
  --oc-color-info: #0369a1;
  --oc-color-success: #4d7f3b;
  --oc-color-warning: #d97706;
  --oc-color-danger: #dc2626;
  --oc-color-selection: rgb(52 116 93 / 20%);

  /* Contribution heatmap: no activity + GitHub-style contribution quartiles. */
  --oc-heatmap-empty: #f1f5f9;
  --oc-heatmap-empty-border: #d9e3ee;
  --oc-heatmap-level-1: #ddf2e6;
  --oc-heatmap-level-1-border: #bce4cf;
  --oc-heatmap-level-2: #8fceb0;
  --oc-heatmap-level-2-border: #60b18d;
  --oc-heatmap-level-3: #438f71;
  --oc-heatmap-level-3-border: #34745d;
  --oc-heatmap-level-4: #274c40;
  --oc-heatmap-level-4-border: #213e35;

  --oc-gradient-canvas:
    radial-gradient(circle at top left, rgb(52 116 93 / 11%), 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, #f2faf6 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-primary: 4px 4px 0 0 rgb(52 116 93 / 14%);
  --oc-shadow-primary-hover: 5px 5px 0 0 rgb(52 116 93 / 20%);
  --oc-shadow-amber: 5px 5px 0 0 rgb(245 158 11 / 12%);
  --oc-shadow-teal: var(--oc-shadow-primary);

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