/* Ocean design tokens (shoxel-mono frontend/admin/src/theme/tokens.css) — dark via :root.dark */

:root {
  /* surface — cool slate backgrounds */
  --color-surface: #f8fafc;
  --color-surface-subtle: #f1f5f9;
  --color-surface-hover: #e2e8f0;
  --color-surface-strong: #cbd5e1;

  /* text — cool dark */
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-inverted: #f8fafc;

  /* border — slate */
  --color-border-default: #cbd5e1;
  --color-border-subtle: #e2e8f0;
  --color-border-strong: #94a3b8;

  /* accent — teal */
  --color-accent-50: #f0fdfa;
  --color-accent-100: #ccfbf1;
  --color-accent-200: #99f6e4;
  --color-accent-300: #5eead4;
  --color-accent-400: #2dd4bf;
  --color-accent-500: #14b8a6;
  --color-accent: #0d9488;
  --color-accent-700: #0f766e;
  --color-accent-800: #115e59;
  --color-accent-900: #134e4a;
  --color-accent-subtle: #f0fdfa;
  --color-accent-inverted: #ffffff;

  /* semantic */
  --color-success: #16a34a;
  --color-success-subtle: #dcfce7;
  --color-warn: #ca8a04;
  --color-warn-subtle: #fef9c3;
  --color-danger: #dc2626;
  --color-danger-subtle: #fee2e2;
  --color-info: #2563eb;
  --color-info-subtle: #dbeafe;

  /* overlay */
  --color-overlay: rgba(0, 0, 0, 0.75);

  /* focus */
  --color-focus: #14b8a6;
}

:root.dark {
  /* surface — deep ocean */
  --color-surface: #0c1222;
  --color-surface-subtle: #162032;
  --color-surface-hover: #1e3044;
  --color-surface-strong: #2a4058;

  /* text */
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-inverted: #0c1222;

  /* border */
  --color-border-default: #2a4058;
  --color-border-subtle: #1e3044;
  --color-border-strong: #3b5570;

  /* accent — teal (dark) */
  --color-accent-50: #042f2e;
  --color-accent-100: #134e4a;
  --color-accent-200: #115e59;
  --color-accent-300: #0f766e;
  --color-accent-400: #0d9488;
  --color-accent-500: #14b8a6;
  --color-accent: #2dd4bf;
  --color-accent-700: #5eead4;
  --color-accent-800: #99f6e4;
  --color-accent-900: #ccfbf1;
  --color-accent-subtle: #0a2928;
  --color-accent-inverted: #0c1222;

  /* semantic */
  --color-success: #4ade80;
  --color-success-subtle: #14532d;
  --color-warn: #facc15;
  --color-warn-subtle: #422006;
  --color-danger: #f87171;
  --color-danger-subtle: #450a0a;
  --color-info: #60a5fa;
  --color-info-subtle: #1e3a5f;

  /* overlay */
  --color-overlay: rgba(0, 0, 0, 0.75);

  /* focus */
  --color-focus: #2dd4bf;
}