/*
 * Shut It Down design tokens.
 * Base: deep ink navy + cool slate for credibility. Accent: violet, used sparingly.
 */
:root {
  /* Ink (navy) */
  --ink: #0B1B33;
  --ink-2: #13294B;
  --ink-3: #213961;
  --ink-edge: #050C17;

  /* Neutrals, biased slightly toward navy */
  --slate: #4A5A70;
  --slate-2: #6B7A8F;
  --line: #E3E8EF;
  --grid: #E9EDF3;
  --mist: #F5F7FA;
  --paper: #FFFFFF;

  /* Violet accent */
  --violet-50: #F0EDFF;
  --violet-100: #E6E0FF;
  --violet-200: #DCD3FF;
  --violet-300: #BFB2F2;
  --violet-400: #A594FF;
  --violet-500: #7C5CFF;
  --violet-600: #6A4BF0;
  --violet-700: #5B3FD6;
  --violet-800: #4A2FCB;
  --violet-900: #3A22A8;

  /* Signal red: irreversible actions only */
  --red-500: #E8505A;
  --red-600: #C42A35;
  --red-700: #8F1A24;
  --red-900: #6E111A;

  /* Semantic aliases */
  --color-text: var(--slate);
  --color-heading: var(--ink);
  --color-muted: var(--slate-2);
  --color-bg: var(--paper);
  --color-subtle-bg: var(--mist);
  --color-border: var(--line);
  --color-accent: var(--violet-500);
  --color-accent-text: var(--violet-700);
  --color-focus: var(--violet-500);

  /* Logo: override these three on dark surfaces (see design-system/index.html#logo) */
  --logo-mark: var(--violet-600);
  --logo-name: var(--ink);
  --logo-accent: var(--violet-600);

  /* Type */
  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 26px;
  --text-2xl: 38px;
  --text-3xl: 64px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.03em;
  --tracking-display: -0.035em;

  /* Radius: tight corners throughout */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 7px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-soft: 0 13px 27px -5px rgba(11, 27, 51, .14), 0 8px 16px -8px rgba(11, 27, 51, .18);
  --shadow-card: 0 30px 60px -12px rgba(11, 27, 51, .22), 0 18px 36px -18px rgba(11, 27, 51, .28);

  /* Motion */
  --ease-press: cubic-bezier(.3, .7, .4, 1);
  --duration-press: 140ms;
}