/* Syfröst — color tokens. Base palette first, semantic aliases below. Use semantic aliases in UI. */
:root {
  /* Base — Deep Blue Premium, primary brand */
  --color-blue-50: #f4f7ff;
  --color-blue-100: #e8eefe;
  --color-blue-200: #cdd9fb;
  --color-blue-300: #9fb5f5;
  --color-blue-400: #6b8cec;
  --color-blue-500: #3d63df;
  --color-blue-600: #2447c2;
  --color-blue-700: #1a359c;
  --color-blue-800: #13277a; /* Deep Blue Premium — core brand color */
  --color-blue-900: #0c1a55;
  --color-blue-950: #060d33;

  /* Frost — cool highlight, used sparingly on dark surfaces */
  --color-frost-200: #d6f4ff;
  --color-frost-400: #8adcf7;
  --color-frost-600: #2aa3cc;

  /* Vivid — secondary scale for brilliance: royal blues + aurora greens */
  --color-vivid-50: #eefaff;
  --color-vivid-100: #d9f4ff;
  --color-vivid-200: #bfeaff;
  --color-vivid-300: #5cc8ff;
  --color-vivid-400: #2f9bff;
  --color-vivid-500: #2f6bff;
  --color-vivid-600: #1b2fe0;
  --color-vivid-700: #1622b0;
  --color-vivid-mint-100: #d5f9ee;
  --color-vivid-mint-300: #8aedcf;
  --color-vivid-mint-500: #3fe0b0;
  --color-vivid-mint-700: #1aa883;
  /* named aliases (royal stops of the gradients) */
  --color-vivid-ice: var(--color-vivid-200);
  --color-vivid-sky: var(--color-vivid-300);
  --color-vivid-azure: var(--color-vivid-400);
  --color-vivid-electric: var(--color-vivid-500);
  --color-vivid-ultramarine: var(--color-vivid-600);
  --color-vivid-mint: var(--color-vivid-mint-500);

  /* Ink — cool neutrals tinted toward blue */
  --color-ink-0: #ffffff;
  --color-ink-50: #f7f8fc;
  --color-ink-100: #eef0f7;
  --color-ink-200: #dfe2ee;
  --color-ink-300: #c4c8da;
  --color-ink-400: #9399b5;
  --color-ink-500: #6a7193;
  --color-ink-600: #4a5275;
  --color-ink-700: #2e3656;
  --color-ink-800: #1b2240;
  --color-ink-900: #0d1230;

  /* Status — from Emagma */
  --color-green-100: #e3f4e8;
  --color-green-500: #34a853;
  --color-green-vivid: #00b37a;
  --color-green-700: #13612e;
  --color-amber-100: #fff1d6;
  --color-amber-500: #ff9e00;
  --color-amber-vivid: #ffb400;
  --color-amber-700: #a16207;
  --color-orange-100: #fde8dc;
  --color-orange-700: #c2410c;
  --color-orange-vivid: #ff6a1a;
  --color-red-100: #fde3e1;
  --color-red-500: #e41d23;
  --color-red-700: #b82105;
  --color-red-vivid: #ff2d4b;
  --color-info-100: #e2ecf9;
  --color-info-600: #1159af;
  --color-info-vivid: #2f6bff;

  /* ——— Semantic aliases ——— */
  --brand-primary: var(--color-blue-800);
  --brand-primary-hover: var(--color-blue-700);
  --brand-primary-active: var(--color-blue-900);
  --brand-accent: var(--color-vivid-electric);

  --text-strong: var(--color-ink-900);
  --text-body: var(--color-ink-700);
  --text-muted: var(--color-ink-500);
  --text-subtle: var(--color-ink-400);
  --text-brand: var(--color-blue-800);
  --text-link: var(--color-blue-600);
  --text-link-hover: var(--color-blue-800);
  --text-inverse: var(--color-ink-0);
  --text-inverse-muted: var(--color-blue-200);
  --text-on-vivid: var(--color-ink-0);

  --surface-page: var(--color-ink-50);
  --surface-card: var(--color-ink-0);
  --surface-sunken: var(--color-ink-100);
  --surface-brand-soft: var(--color-blue-50);
  --surface-brand: var(--color-blue-800);
  --surface-inverse: var(--color-blue-950);
  --surface-inverse-raised: var(--color-blue-900);
  --surface-overlay: rgba(6, 13, 51, 0.55);

  --border-subtle: var(--color-ink-100);
  --border-default: var(--color-ink-200);
  --border-strong: var(--color-ink-300);
  --border-brand: var(--color-blue-600);
  --border-inverse: rgba(255, 255, 255, 0.12);

  --focus-ring: var(--color-blue-500);

  --action-primary-bg: var(--color-blue-800);
  --action-primary-bg-hover: var(--color-blue-700);
  --action-primary-text: var(--color-ink-0);
  --action-secondary-bg: var(--color-ink-0);
  --action-secondary-bg-hover: var(--color-blue-50);
  --action-secondary-border: var(--color-ink-200);
  --action-secondary-text: var(--color-blue-800);
  --action-ghost-bg-hover: var(--color-blue-50);
  --action-ghost-text: var(--color-blue-800);
  --action-danger-bg: var(--color-red-700);
  --action-danger-bg-hover: #9a1b04;

  --status-success: var(--color-green-vivid);
  --status-success-soft: var(--color-green-100);
  --status-success-dot: var(--color-green-500);
  --status-info: var(--color-info-vivid);
  --status-info-soft: var(--color-info-100);
  --status-warning: var(--color-orange-vivid);
  --status-warning-soft: var(--color-orange-100);
  --status-danger: var(--color-red-vivid);
  --status-danger-soft: var(--color-red-100);
  --status-highlight: var(--color-amber-vivid);
  --status-highlight-soft: var(--color-amber-100);
}