/*
  Covex-Board -- design tokens.

  One file decides colour, type, spacing, elevation and motion. Nothing else
  hardcodes a hex; app.css only ever reads these variables.

  The accent is a deep stamp-teal -- the marking ink you would stamp on a
  paper work ticket, deliberately not the default product blue. The
  monospace face carries everything machine-readable (issue keys, counts,
  story points, column headers), which is what makes a board full of small
  identifiers read as a ledger rather than as prose. Type is the system stack
  on purpose: a webfont is a network round trip, and an internal tool that is
  open all day should paint instantly instead.

  Every foreground/background pair below was measured with check_contrast and
  clears WCAG AA for normal text (4.5:1) in both light and dark. If you move
  an accent or a surface, re-check it against --surface, --surface-sunken and
  --surface-raised in both schemes rather than eyeballing it.
*/

:root {
  color-scheme: light;

  /* ---- color: light (default) ---- */
  --surface: #ffffff;          /* the workspace: plain white */
  --rail-bg: #e4eefb;          /* the nav pane -- the one tinted surface */
  --surface-sunken: #f2f4f7;   /* board troughs, table heads */
  --surface-raised: #ffffff;   /* tickets, panels, chrome */
  --surface-tint: #f0f3f6;     /* chips, empty states, hover washes */
  --border: #e4e7eb;           /* hairline, structure only */
  --border-strong: #cdd3da;    /* control outlines, focus-adjacent */

  --text: #191a18;             /* 15.83:1 on --surface */
  --text-muted: #5c5b55;       /*  5.88:1 on --surface */

  --accent: #0f5f63;
  --accent-hover: #0b4a4d;
  --accent-soft: #e3efee;      /* tint behind the active nav item */
  --accent-contrast: #ffffff;  /*  7.40:1 on --accent */

  --success: #1c6b46;
  --warning: #8a5200;
  --danger: #ab2418;
  --danger-contrast: #ffffff;  /* on --danger; dark scheme flips this */

  /* Workflow columns. Each is also used as text, so each is checked at
     4.5:1 against --surface-raised. */
  --status-todo: #5a6270;
  --status-in-progress: #8a5200;
  --status-in-review: #5b3fa0;
  --status-done: #1c6b46;

  /* Issue types -- a separate vocabulary from status, on purpose. */
  --type-story: #0f5f63;
  --type-bug: #ab2418;
  --type-task: #4a5560;
  --type-epic: #7a3f8f;

  /* Priority is a ranked scale, so it gets one hue at three intensities. */
  --priority-highest: #ab2418;
  --priority-high: #a2540d;
  --priority-medium: #5c5b55;
  --priority-low: #6b6a63;

  /* ---- elevation ----
     Structure in this UI is tone plus shadow, not outlines: a raised surface
     sits on a slightly different surface and casts a soft shadow. Only
     genuinely tabular divisions keep a hairline border. */
  --shadow-sm: 0 1px 2px rgba(24, 26, 25, 0.06);
  --shadow-md: 0 1px 2px rgba(24, 26, 25, 0.05), 0 6px 16px -6px rgba(24, 26, 25, 0.13);
  --shadow-lg: 0 2px 6px rgba(24, 26, 25, 0.07), 0 18px 40px -14px rgba(24, 26, 25, 0.22);
  --shadow-drawer: -24px 0 60px -20px rgba(24, 26, 25, 0.28);
  --scrim: rgba(22, 24, 23, 0.42);

  /* ---- motion ----
     Short on purpose. The view is rebuilt from scratch on every filter
     change, so anything still animating when the next render lands reads as
     a flicker rather than as feedback. Nothing here exceeds 240ms, and the
     drawer's exit has to finish inside the 180ms hide timer in app.js. */
  --dur-fast: 110ms;
  --dur: 170ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- type ---- */
  --font-display: -apple-system, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-body: -apple-system, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  /* ---- spacing: 4px base ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Restrained radii: cards 10px, controls 8px, chips 5px. Deliberately not
     one big radius on every element. */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --rail-width: 240px;
}

/* The dark palette is selected by an attribute rather than a media query so
   the switch can override the OS. A tiny inline script in index.html sets
   data-theme before first paint, so the attribute is always present by the
   time anything is visible. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #0f1214;
  --rail-bg: #0a0d0f;
  --surface-sunken: #0a0d0f;
  --surface-raised: #171b1e;
  --surface-tint: #1e2327;
  --border: #262c31;
  --border-strong: #3a4249;

  --text: #eef1f2;           /* 15.65:1 on --surface */
  --text-muted: #9aa3a8;     /*  7.22:1 on --surface */

  --accent: #5ec6c9;
  --accent-hover: #7bd4d6;
  --accent-soft: #13363a;
  --accent-contrast: #06201f; /* 8.41:1 on --accent */

  --success: #4ec38b;
  --warning: #e0a338;
  --danger: #f07a70;
  --danger-contrast: #2a0f0c; /* dark ink: #ffffff on #f07a70 would fail */

  --status-todo: #9aa7b4;
  --status-in-progress: #e0a338;
  --status-in-review: #b79ce8;
  --status-done: #4ec38b;

  --type-story: #6fb3b6;
  --type-bug: #f07a70;
  --type-task: #a3aeb9;
  --type-epic: #c79ad8;

  --priority-highest: #f07a70;
  --priority-high: #e0a338;
  --priority-medium: #9aa3a8;
  --priority-low: #8f979c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.40), 0 18px 40px -14px rgba(0, 0, 0, 0.70);
  --shadow-drawer: -24px 0 60px -20px rgba(0, 0, 0, 0.80);
  --scrim: rgba(0, 0, 0, 0.58);
}

/* ---- base ---- */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Native controls and scrollbars follow the scheme instead of always
   rendering light. */
.rail,
.view,
.drawer-body,
.modal-layer {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.011em;
  margin: 0;
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--accent);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.tabular,
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.label-caps {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Motion is opt-out, and the delay has to be zeroed as well as the duration:
   an entry animation held at its `from` frame by a 180ms delay would leave
   the element invisible for that long. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---- components ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:active:not(:disabled) {
  transform: scale(0.975);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface-tint);
}

.btn-quiet {
  color: var(--text-muted);
}

.btn-quiet:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-tint);
}

.btn-danger {
  border-color: var(--border-strong);
  color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: var(--surface-tint);
}

.btn-sm {
  min-height: 26px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

.card {
  background: var(--surface-raised);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.input::placeholder {
  color: var(--text-muted);
}

.input:hover:not(:disabled) {
  border-color: var(--text-muted);
}

.input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-6);
  cursor: pointer;
}

textarea.input {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}