/*
 * styles.css
 *
 * Global resets and design tokens. Component level styling lives inside
 * each custom element's own Constructable Stylesheet (see
 * js/components/shared-styles.js); this file only sets up the page
 * shell, fonts and the colour tokens that pass through the shadow DOM
 * boundary as custom properties.
 *
 * Copyright (c) 2026 Almin Ibrahimovic. All rights reserved.
 */

:root {
  color-scheme: dark;

  --colour-bg: #101014;
  --colour-surface: #16161c;
  --colour-panel: #1b1b22;
  --colour-input: #22222b;
  --colour-hover: #26262f;
  --colour-border: #2d2d38;
  --colour-text: #f2f2f5;
  --colour-text-muted: #9a9aa8;
  --colour-accent: #7c9bff;
  --colour-accent-strong: #a9bcff;
  --colour-accent-muted: rgba(124, 155, 255, 0.16);
  --colour-danger: #ff8a8a;
  --colour-focus: #7c9bff;
  --colour-checker-a: #1c1c24;
  --colour-checker-b: #17171d;

  --radius: 14px;
  --radius-sm: 8px;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;

  --colour-bg: #f4f4f7;
  --colour-surface: #ffffff;
  --colour-panel: #ffffff;
  --colour-input: #eef0f5;
  --colour-hover: #e7e9f0;
  --colour-border: #d9dce4;
  --colour-text: #16161c;
  --colour-text-muted: #5b5b68;
  --colour-accent: #3854d6;
  --colour-accent-strong: #22337f;
  --colour-accent-muted: rgba(56, 84, 214, 0.12);
  --colour-danger: #b3271e;
  --colour-focus: #3854d6;
  --colour-checker-a: #e9ebf1;
  --colour-checker-b: #dfe1e9;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  background: var(--colour-bg);
  color: var(--colour-text);
  font-family: var(--font-stack);
  -webkit-text-size-adjust: 100%;
}

#app-root {
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

app-shell {
  flex: 1;
  min-height: 0;
}

button, input, select, textarea {
  font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}