/* ============================================================================
   Collector Design System — Tokens
   Edition 01 · Dark default · Editorial / Magazine direction
   ============================================================================ */

:root {
  /* — Typography families ---------------------------------------------------*/
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Type scale (tamer: 72/56/40/32/24/20/16/14/13/11) --------------------*/
  --t-display-hero:  72px;   /* hero numbers / mastheads */
  --t-display-lg:    56px;   /* large hero KPI */
  --t-display-md:    40px;   /* page H1 */
  --t-h1:            32px;   /* section title */
  --t-h2:            24px;   /* sub-section */
  --t-h3:            20px;   /* card title / row name */
  --t-body-lg:       16px;
  --t-body:          14px;
  --t-caption:       13px;
  --t-mono:          11px;   /* mono eyebrow / metadata */

  --lh-display: 0.92;
  --lh-tight:   1.1;
  --lh-base:    1.5;

  --ls-display: -0.04em;
  --ls-h1:      -0.035em;
  --ls-h2:      -0.02em;
  --ls-h3:      -0.015em;
  --ls-mono:    0.16em;

  /* — Spacing (4px base) ----------------------------------------------------*/
  --s-1:   2px;
  --s-2:   4px;
  --s-3:   8px;
  --s-4:   12px;
  --s-5:   16px;
  --s-6:   20px;
  --s-7:   24px;
  --s-8:   32px;
  --s-9:   40px;
  --s-10:  48px;
  --s-11:  64px;
  --s-12:  96px;

  /* — Radii (single 16px commitment + pill) --------------------------------*/
  --r-sm:   8px;    /* tag / small chip */
  --r-md:   16px;   /* card / input / button / panel — the canonical radius */
  --r-lg:   24px;   /* hero cards */
  --r-pill: 999px;  /* pills, segmented controls */

  /* — Brand & status (mode-agnostic surfaces) ------------------------------*/
  --c-lime:      #c7ff5b;
  --c-lime-ink:  #0a0a0a;     /* always-dark foreground on lime */
  --c-lavender:      #a78bfa;
  --c-lavender-ink:  #0a0a0a;

  /* — Interactive accent: lime in dark, lavender in light -------------------*/
  --c-accent:     var(--c-lime);
  --c-accent-ink: var(--c-lime-ink);

  /* Status hues — pure values; bg/fg pairs defined per theme below */
  --c-status-pending:    #f5b544;   /* yellow — Čakajúce */
  --c-status-claimed:    #8fb4ff;   /* blue   — Nahlásené */
  --c-status-confirmed:  #c7ff5b;   /* lime   — Potvrdené */
  --c-status-waived:     #a78bfa;   /* lavender — Odpustené */
  --c-status-overdue:    #ff4d6d;   /* raspberry — Po splatnosti */

  /* Extended accents (Edition 02) */
  --c-raspberry:     #ff4d6d;
  --c-raspberry-ink: #0a0a0a;
  --c-olive:         #84cc16;
  --c-olive-ink:     #0a0a0a;

  --c-danger:  #ff4d6d;   /* alias → raspberry */
  --c-success: #c7ff5b;

  /* — Motion ---------------------------------------------------------------*/
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --d-fast:    140ms;
  --d-base:    220ms;
  --d-slow:    340ms;
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK theme (default)
   ──────────────────────────────────────────────────────────────────────── */
:root,
:root.theme-dark {
  color-scheme: dark;

  --bg-base:      #0a0a0a;
  --bg-surface:   #131313;   /* card */
  --bg-elevated:  #1a1a1a;   /* modal, popover */
  --bg-inset:     #050505;   /* below-surface (code blocks, wells) */

  --fg-primary:    #fafafa;
  --fg-secondary:  rgba(255, 255, 255, 0.72);
  --fg-tertiary:   rgba(255, 255, 255, 0.5);
  --fg-muted:      rgba(255, 255, 255, 0.38);
  --fg-disabled:   rgba(255, 255, 255, 0.22);

  --line-subtle:   rgba(255, 255, 255, 0.06);
  --line-default:  rgba(255, 255, 255, 0.12);
  --line-strong:   rgba(255, 255, 255, 0.2);

  --overlay:       rgba(0, 0, 0, 0.6);

  /* Status backgrounds + foregrounds */
  --c-pending-bg:    rgba(245, 181, 68, 0.14);
  --c-pending-fg:    #f5b544;
  --c-claimed-bg:    rgba(143, 180, 255, 0.14);
  --c-claimed-fg:    #a8c4ff;
  --c-confirmed-bg:  #c7ff5b;
  --c-confirmed-fg:  #0a0a0a;
  --c-waived-bg:     rgba(167, 139, 250, 0.16);
  --c-waived-fg:     #c4b1ff;

  --c-danger-bg:     rgba(255, 77, 109, 0.16);
  --c-danger-fg:     #ff7a92;

  --c-overdue-bg:    rgba(255, 77, 109, 0.16);
  --c-overdue-fg:    #ff7a92;

  --c-olive-bg:      rgba(132, 204, 22, 0.18);
  --c-olive-fg:      #a5e635;

  /* Shadows are subtle in dark mode — borders do the work */
  --shadow-sm:  0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT theme
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not(.theme-dark) {
    color-scheme: light;

    --bg-base:      #f6f5ef;   /* warm off-white, magazine paper */
    --bg-surface:   #ffffff;
    --bg-elevated:  #ffffff;
    --bg-inset:     #ecebe4;

    --fg-primary:    #0a0a0a;
    --fg-secondary:  rgba(10, 10, 10, 0.72);
    --fg-tertiary:   rgba(10, 10, 10, 0.55);
    --fg-muted:      rgba(10, 10, 10, 0.42);
    --fg-disabled:   rgba(10, 10, 10, 0.25);

    --line-subtle:   rgba(10, 10, 10, 0.06);
    --line-default:  rgba(10, 10, 10, 0.12);
    --line-strong:   rgba(10, 10, 10, 0.22);

    --overlay:       rgba(10, 10, 10, 0.45);

    --c-pending-bg:    rgba(245, 181, 68, 0.18);
    --c-pending-fg:    #8a5d10;
    --c-claimed-bg:    rgba(80, 120, 240, 0.12);
    --c-claimed-fg:    #2c4ea8;
    --c-confirmed-bg:  #c7ff5b;
    --c-confirmed-fg:  #1a3a05;
    --c-waived-bg:     rgba(120, 90, 230, 0.14);
    --c-waived-fg:     #5a3fb8;

    --c-danger-bg:     rgba(255, 77, 109, 0.10);
    --c-danger-fg:     #c41e3a;

    --c-overdue-bg:    rgba(255, 77, 109, 0.10);
    --c-overdue-fg:    #c41e3a;

    --c-olive-bg:      rgba(132, 204, 22, 0.22);
    --c-olive-fg:      #4d7c0f;

    --c-accent:     var(--c-lavender);
    --c-accent-ink: #0a0a0a;

    --shadow-sm:  0 1px 2px rgba(10, 10, 10, 0.04);
    --shadow-md:  0 10px 28px rgba(10, 10, 10, 0.08);
    --shadow-lg:  0 24px 60px rgba(10, 10, 10, 0.12);
  }
}

/* Manual override — wins over media query */
:root.theme-light {
  color-scheme: light;

  --bg-base:      #f6f5ef;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;
  --bg-inset:     #ecebe4;

  --fg-primary:    #0a0a0a;
  --fg-secondary:  rgba(10, 10, 10, 0.72);
  --fg-tertiary:   rgba(10, 10, 10, 0.55);
  --fg-muted:      rgba(10, 10, 10, 0.42);
  --fg-disabled:   rgba(10, 10, 10, 0.25);

  --line-subtle:   rgba(10, 10, 10, 0.06);
  --line-default:  rgba(10, 10, 10, 0.12);
  --line-strong:   rgba(10, 10, 10, 0.22);

  --overlay:       rgba(10, 10, 10, 0.45);

  --c-pending-bg:    rgba(245, 181, 68, 0.18);
  --c-pending-fg:    #8a5d10;
  --c-claimed-bg:    rgba(80, 120, 240, 0.12);
  --c-claimed-fg:    #2c4ea8;
  --c-confirmed-bg:  #c7ff5b;
  --c-confirmed-fg:  #1a3a05;
  --c-waived-bg:     rgba(120, 90, 230, 0.14);
  --c-waived-fg:     #5a3fb8;

  --c-danger-bg:     rgba(255, 77, 109, 0.10);
  --c-danger-fg:     #c41e3a;

  --c-overdue-bg:    rgba(255, 77, 109, 0.10);
  --c-overdue-fg:    #c41e3a;

  --c-olive-bg:      rgba(132, 204, 22, 0.22);
  --c-olive-fg:      #4d7c0f;

  --c-accent:     var(--c-lavender);
  --c-accent-ink: #0a0a0a;

  --shadow-sm:  0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md:  0 10px 28px rgba(10, 10, 10, 0.08);
  --shadow-lg:  0 24px 60px rgba(10, 10, 10, 0.12);
}

/* ────────────────────────────────────────────────────────────────────────────
   Base reset
   ──────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  transition: background-color var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out);
}
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }