/**
 * Easy Archery Desktop — aligns with home.easyarchery.net / websites/easyarchery.net
 * Brand: hue 202, Kanit + Source Sans 3.
 * Dark: default (:root). Light: @media (prefers-color-scheme: light) — card-style UI.
 *
 * Customer / tenant theming: ship a second stylesheet AFTER this file, e.g. tenant-theme.css,
 * containing only overrides such as:
 *   :root { --ea-accent: #e85d04; --hue: 24; --terminal-green: var(--ea-accent); }
 * Prefer --ea-* and --terminal-* tokens; components avoid hard-coded hex where possible.
 */

@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;0,500;0,600;0,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700&display=swap');

/* -------------------------------------------------------------------------- */
/* Shared design tokens (both themes)                                         */
/* -------------------------------------------------------------------------- */

:root {
  --hue: 202;

  --bg-100: hsla(var(--hue), 0%, 98%, 1);
  --bg-150: hsla(var(--hue), 0%, 94%, 1);
  --bg-100-inv: hsla(var(--hue), 0%, 10%, 1);
  --bg-200-inv: hsla(var(--hue), 0%, 16%, 1);
  --bg-300-inv: hsla(var(--hue), 0%, 22%, 1);

  --mn-300: hsla(var(--hue), 50%, 70%, 1);
  --mn-400: hsla(var(--hue), 55%, 60%, 1);
  --mn-500: hsla(var(--hue), 60%, 50%, 1);
  --mn-600: hsla(var(--hue), 65%, 42%, 1);
  --mn-700: hsla(var(--hue), 70%, 32%, 1);
  --mn-800: hsla(var(--hue), 75%, 22%, 1);

  --tx-100: hsla(var(--hue), 0%, 16%, 1);
  --tx-100-inv: hsla(var(--hue), 0%, 100%, 1);
  --tx-200-inv: hsla(var(--hue), 0%, 100%, 0.85);

  --font-primary: 'Kanit', sans-serif;
  --font-secondary: 'Source Sans 3', sans-serif;

  --font-mono: 'Fira Code', 'Source Code Pro', ui-monospace, monospace;

  /* Marketing accent (features section) */
  --ea-accent: #00aeef;
  --ea-accent-soft: rgba(0, 174, 239, 0.12);
}

/* -------------------------------------------------------------------------- */
/* Dark theme (default) — matches existing desktop shell                       */
/* -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --terminal-green: hsl(188, 72%, 58%);
  --terminal-text: hsl(186, 65%, 78%);
  --terminal-bg: hsl(204, 42%, 8%);
  --terminal-bg-light: hsl(202, 35%, 14%);
  --terminal-gray: hsl(202, 18%, 28%);
  --terminal-pink: hsl(202, 85%, 72%);
  --archery-gold: var(--mn-300);
  --terminal-selection: hsla(188, 72%, 58%, 0.35);

  --glass-bg: hsla(var(--hue), 40%, 6%, 0.88);
  --glass-border: hsla(var(--hue), 55%, 45%, 0.35);

  --ea-dock-bg: hsla(var(--hue), 35%, 12%, 0.92);
  --ea-dock-border: hsla(var(--hue), 45%, 42%, 0.45);
  --ea-dock-shadow: 0 12px 40px hsla(var(--hue), 60%, 4%, 0.55);

  --ea-icon-bg: hsla(var(--hue), 30%, 20%, 0.45);
  --ea-icon-bg-hover: hsla(var(--hue), 35%, 28%, 0.65);

  --ea-page-fill: var(--terminal-bg);
  --ea-heading-color: var(--tx-100-inv);

  /* Dense apps (spreadsheet, camera panels, inputs) */
  --ea-surface-app: hsl(204, 40%, 9%);
  --ea-surface-toolbar: hsl(202, 32%, 13%);
  --ea-surface-input: hsl(204, 38%, 11%);
  --ea-surface-input-focus: hsl(210, 32%, 18%);
  --ea-text-app: var(--terminal-text);
  --ea-text-muted: rgba(175, 205, 215, 0.55);
  --ea-border-app: var(--terminal-gray);
  --ea-border-accent: hsla(188, 72%, 58%, 0.38);
  --ea-border-accent-soft: hsla(188, 72%, 58%, 0.26);
  --ea-hover-accent-bg: hsla(188, 72%, 58%, 0.1);
  --ea-hover-accent-bg-strong: hsla(188, 72%, 58%, 0.18);
  --ea-hover-accent-border: hsla(188, 72%, 58%, 0.32);
  --ea-shadow-focus: hsla(188, 72%, 58%, 0.28);
  --ea-window-shadow: 0 0 28px hsla(188, 55%, 42%, 0.22);
  --ea-video-bg: #030508;
  --ea-surface-panel: hsla(206, 22%, 10%, 0.82);
  --ea-input-well: hsl(204, 35%, 7%);
  --ea-log-item-bg: hsla(206, 18%, 8%, 0.55);
  --ea-shadow-elevated: 0 6px 20px rgba(0, 0, 0, 0.55);
  --ea-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.65);
  --ea-pose-ref-bg: hsla(160, 40%, 8%, 0.4);

  /* Kanban board / column (kanban-board.css, kanban-column.css) */
  --color-background-100: var(--ea-surface-app);
  --color-background-200: hsl(204, 28%, 12%);
  --color-background-50: hsl(204, 22%, 14%);
  --color-background-400: hsl(204, 16%, 30%);
  --color-border-100: var(--ea-border-app);
  --color-text-300: var(--ea-text-app);
  --color-text-200: hsl(186, 22%, 82%);
  --color-primary-300: var(--terminal-green);

  /* Cards slotted into kanban columns + app-kanban task-card */
  --ea-card-surface: hsl(206, 16%, 17%);
  --ea-card-border: hsl(202, 14%, 26%);

  /* note-editor, embedded editors */
  --editor-bg: var(--ea-surface-input);
  --editor-text: var(--ea-text-app);
  --editor-code-bg: var(--ea-surface-toolbar);
  --editor-blockquote-border: var(--ea-border-app);
  --editor-blockquote-color: var(--ea-text-muted);
  --editor-link-color: hsl(199, 85%, 55%);
  --editor-link-hover-color: hsl(199, 90%, 68%);
  --editor-focus-color: var(--terminal-green);
  --editor-placeholder: var(--ea-text-muted);
  --scrollbar-track: var(--ea-surface-app);
  --scrollbar-thumb: hsl(204, 12%, 32%);
  --scrollbar-thumb-hover: hsl(204, 10%, 40%);

  /* Camera / dense panels: body copy vs accent (avoid neon text on light panels) */
  --ea-panel-body-text: var(--terminal-text);
  --ea-control-fg: var(--terminal-green);
  --ea-engine-line-fg: rgba(200, 245, 210, 0.95);
  --ea-engine-warn-fg: rgba(255, 222, 140, 0.98);
  --ea-engine-muted-fg: rgba(210, 210, 210, 0.92);
  --ea-cap-status-idle: rgba(170, 255, 180, 0.92);
  --ea-cap-status-wait: rgba(255, 220, 140, 0.95);
  --ea-cap-status-count: rgba(130, 230, 255, 0.96);
  --ea-cap-status-saved: rgba(155, 255, 175, 0.96);

  --log-motion-title: #9ee6a8;
  --log-motion-chip-text: rgba(210, 250, 215, 0.92);
  --log-motion-chip-border: rgba(120, 200, 130, 0.45);
  --log-motion-bg: rgba(40, 120, 60, 0.12);
  --log-pose-title: #d8c4ff;
  --log-pose-chip-text: rgba(225, 210, 255, 0.95);

  --ea-log-config-type: #7cecff;
  --ea-log-config-chip: rgba(130, 240, 255, 0.95);
  --ea-log-warn-type: #ffd85c;
  --ea-log-warn-chip: rgba(255, 220, 120, 0.95);
  --ea-log-error-type: #ff9b9b;
  --ea-log-error-chip: rgba(255, 190, 190, 0.95);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background-color: var(--ea-page-fill);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  font-family: var(--font-secondary), system-ui, sans-serif;
  font-size: 15px;
  color: var(--terminal-text);
  background: radial-gradient(
      120% 80% at 10% 0%,
      hsl(202, 50%, 18%) 0%,
      transparent 55%
    ),
    radial-gradient(
      90% 70% at 100% 20%,
      hsl(202, 45%, 14%) 0%,
      transparent 50%
    ),
    linear-gradient(
      165deg,
      hsl(204, 44%, 7%) 0%,
      hsl(206, 38%, 10%) 45%,
      hsl(202, 36%, 8%) 100%
    );
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-primary), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ea-heading-color);
}

#open-auth-btn {
  font-family: var(--font-secondary), system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 1rem;
  border-radius: 0.35rem;
  border: 1px solid hsla(var(--hue), 50%, 45%, 0.6);
  background: var(--bg-100-inv);
  color: var(--tx-100-inv);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#open-auth-btn:hover {
  background: var(--mn-600);
  border-color: var(--mn-400);
  color: var(--tx-100-inv);
}

/* -------------------------------------------------------------------------- */
/* Light theme — system preference (marketing / features card look)            */
/* -------------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --terminal-green: var(--ea-accent);
    --terminal-text: #333333;
    --terminal-bg: #ffffff;
    --terminal-bg-light: #f3f5f7;
    --terminal-gray: #dde3ea;
    --terminal-pink: #0096d4;
    --archery-gold: var(--mn-600);
    --terminal-selection: rgba(0, 174, 239, 0.22);

    --glass-bg: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(0, 174, 239, 0.18);

    --ea-dock-bg: rgba(255, 255, 255, 0.9);
    --ea-dock-border: rgba(0, 0, 0, 0.06);
    --ea-dock-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

    --ea-icon-bg: var(--ea-accent-soft);
    --ea-icon-bg-hover: rgba(0, 174, 239, 0.2);

    --ea-page-fill: #f9f9f9;
    --ea-heading-color: #1a1a1a;

    --ea-surface-app: #ffffff;
    --ea-surface-toolbar: #eef2f6;
    --ea-surface-input: #f5f8fb;
    --ea-surface-input-focus: #e3f5fc;
    --ea-text-app: #333333;
    --ea-text-muted: #6b7580;
    --ea-border-app: #cfd8e3;
    --ea-border-accent: rgba(0, 174, 239, 0.38);
    --ea-border-accent-soft: rgba(0, 174, 239, 0.22);
    --ea-hover-accent-bg: rgba(0, 174, 239, 0.09);
    --ea-hover-accent-bg-strong: rgba(0, 174, 239, 0.16);
    --ea-hover-accent-border: rgba(0, 174, 239, 0.3);
    --ea-shadow-focus: rgba(0, 174, 239, 0.22);
    --ea-window-shadow: 0 10px 32px rgba(20, 45, 60, 0.12);
    --ea-video-bg: #0c1014;
    --ea-surface-panel: rgba(248, 250, 252, 0.97);
    --ea-input-well: #ffffff;
    --ea-log-item-bg: rgba(245, 248, 252, 0.95);
    --ea-shadow-elevated: 0 6px 18px rgba(15, 35, 50, 0.1);
    --ea-shadow-overlay: 0 8px 28px rgba(15, 40, 55, 0.14);
    --ea-pose-ref-bg: rgba(0, 174, 239, 0.06);

    --color-background-100: var(--ea-surface-app);
    --color-background-200: #f0f4f8;
    --color-background-50: #fafcfd;
    --color-background-400: #d0dae4;
    --color-border-100: var(--ea-border-app);
    --color-text-300: #1a1f26;
    --color-text-200: #3d4854;
    --color-primary-300: var(--ea-accent);

    --ea-card-surface: #ffffff;
    --ea-card-border: #e2e8f0;

    --editor-bg: var(--ea-surface-input);
    --editor-text: var(--ea-text-app);
    --editor-code-bg: #e8eef4;
    --editor-blockquote-border: var(--ea-border-app);
    --editor-blockquote-color: var(--ea-text-muted);
    --editor-link-color: hsl(199, 100%, 32%);
    --editor-link-hover-color: hsl(199, 100%, 26%);
    --editor-focus-color: hsl(199, 100%, 32%);
    --editor-placeholder: #7a8796;
    --scrollbar-track: var(--ea-surface-input);
    --scrollbar-thumb: #b8c5d4;
    --scrollbar-thumb-hover: #9dafbf;

    --ea-panel-body-text: hsl(204, 58%, 16%);
    --ea-control-fg: hsl(202, 72%, 26%);
    --ea-engine-line-fg: hsl(152, 48%, 22%);
    --ea-engine-warn-fg: hsl(38, 82%, 28%);
    --ea-engine-muted-fg: hsl(204, 16%, 32%);
    --ea-cap-status-idle: hsl(152, 52%, 24%);
    --ea-cap-status-wait: hsl(38, 82%, 28%);
    --ea-cap-status-count: hsl(198, 65%, 26%);
    --ea-cap-status-saved: hsl(145, 48%, 26%);

    --log-motion-title: hsl(152, 55%, 22%);
    --log-motion-chip-text: hsl(152, 48%, 20%);
    --log-motion-chip-border: hsl(152, 32%, 42%);
    --log-motion-bg: rgba(25, 110, 70, 0.1);
    --log-pose-title: hsl(265, 45%, 28%);
    --log-pose-chip-text: hsl(265, 38%, 26%);

    --ea-log-config-type: hsl(198, 62%, 24%);
    --ea-log-config-chip: hsl(198, 55%, 22%);
    --ea-log-warn-type: hsl(38, 82%, 28%);
    --ea-log-warn-chip: hsl(38, 72%, 24%);
    --ea-log-error-type: hsl(0, 65%, 32%);
    --ea-log-error-chip: hsl(0, 58%, 28%);
  }

  html {
    background-color: var(--ea-page-fill);
  }

  body {
    color: var(--terminal-text);
    background: var(--ea-page-fill);
  }

  #open-auth-btn {
    border: 1px solid #1a1a1a;
    background: #1a1a1a;
    color: #ffffff;
  }

  #open-auth-btn:hover {
    background: var(--ea-accent);
    border-color: var(--ea-accent);
    color: #ffffff;
  }
}