/* Summo Notes - design tokens
   Import once at app root: @import 'brand-tokens.css';  */

:root {
  /* color */
  --sn-ink: #1B2230;
  --sn-blue: #3B68D6;
  --sn-blue-deep: #2A4FB0;
  --sn-yellow: #F2C84B;
  --sn-yellow-deep: #E0AE2E;
  --sn-gray: #71788A;
  --sn-gray-deep: #565B6A;
  --sn-paper: #FAFAF8;
  --sn-cream: #F5F2EA;
  --sn-line: #E5E2D9;
  --sn-blue-tint: #EBF0FB;
  --sn-yellow-tint: #FCF3D7;
  --sn-white: #FFFFFF;
  --sn-text-on-dark: #FFFFFF;
  --sn-text-secondary-on-dark: #A8AEBD;

  /* type */
  --sn-font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --sn-font-serif: 'Newsreader', Georgia, serif;
  --sn-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* radius */
  --sn-radius: 8px;
  --sn-radius-lg: 12px;
  --sn-radius-pill: 999px;

  /* elevation (UI chrome only - never on the logo) */
  --sn-shadow-card: 0 1px 2px rgba(27, 34, 48, 0.06), 0 4px 12px rgba(27, 34, 48, 0.08);

  /* spacing scale */
  --sn-space-1: 4px;
  --sn-space-2: 8px;
  --sn-space-3: 12px;
  --sn-space-4: 16px;
  --sn-space-5: 24px;
  --sn-space-6: 32px;
  --sn-space-7: 48px;
  --sn-space-8: 64px;
}

/* sensible defaults */
.sn-base {
  background: var(--sn-paper);
  color: var(--sn-ink);
  font-family: var(--sn-font-sans);
  line-height: 1.6;
}

.sn-btn-primary {
  background: var(--sn-blue);
  color: var(--sn-white);
  font: 500 16px/1 var(--sn-font-sans);
  border: none;
  border-radius: var(--sn-radius);
  padding: 12px 20px;
  cursor: pointer;
}
.sn-btn-primary:hover { background: var(--sn-blue-deep); }

.sn-btn-secondary {
  background: var(--sn-white);
  color: var(--sn-ink);
  font: 500 16px/1 var(--sn-font-sans);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius);
  padding: 12px 20px;
  cursor: pointer;
}

.sn-card {
  background: var(--sn-white);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-lg);
  box-shadow: var(--sn-shadow-card);
}

mark, .sn-highlight {
  background: var(--sn-yellow-tint);
  color: var(--sn-ink);
  border-radius: 4px;
  padding: 0 3px;
}

:focus-visible {
  outline: 2px solid var(--sn-blue);
  outline-offset: 2px;
}