/**
 * base.css
 * Design tokens, reset, and typography.
 * All other CSS files inherit from variables defined here.
 * Do not add component styles to this file.
 */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────────── */

:root {

  /* Colour — light surface (checklist pane) */
  --color-bg:              #f5f4f0;
  --color-surface:         #ffffff;
  --color-surface-hover:   #fafaf8;
  --color-border:          #e0ddd6;
  --color-border-strong:   #ccc9c0;
  --color-text:            #1a1916;
  --color-text-muted:      #9b9890;

  /* Colour — dark surface (report pane) */
  --color-dark-bg:         #1a1916;
  --color-dark-surface:    #222220;
  --color-dark-border:     #2e2e2a;
  --color-dark-text:       #e8e8ec;
  --color-dark-muted:      #6a6a62;
  --color-dark-accent:     #f0c040;

  /* Colour — semantic */
  --color-accent:          #c8392b;
  --color-accent-light:    #fdf0ef;
  --color-yes:             #27ae60;
  --color-no:              #c8392b;
  --color-na:              #95a5a6;
  --color-warning:         #e67e22;
  --color-info:            #2980b9;

  /* Colour — error levels */
  --color-l1:              #c8392b;
  --color-l1-bg:           #fde8e6;
  --color-l2:              #e67e22;
  --color-l2-bg:           #fef3e2;
  --color-l3:              #2980b9;
  --color-l3-bg:           #e8f3fb;

  /* Typography */
  --font-sans:             'Barlow', system-ui, sans-serif;
  --font-mono:             'DM Mono', 'Courier New', monospace;

  --text-xs:               0.62rem;
  --text-sm:               0.75rem;
  --text-base:             0.875rem;
  --text-md:               1rem;
  --text-lg:               1.1rem;

  --leading-tight:         1.25;
  --leading-normal:        1.6;
  --leading-loose:         1.75;

  --weight-normal:         400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;
  --weight-extrabold:      800;

  /* Spacing — 4px base unit */
  --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;

  /* Radii */
  --radius-sm:             4px;
  --radius-md:             6px;
  --radius-lg:             8px;
  --radius-xl:             12px;
  --radius-pill:           999px;

  /* Shadows */
  --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:             0 2px 8px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast:       0.1s ease;
  --transition-base:       0.15s ease;
  --transition-slow:       0.25s ease;

  /* Z-index scale */
  --z-sticky:              200;
  --z-overlay:             300;
  --z-modal:               400;
}


/* ─── RESET ─────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

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

a {
  color: inherit;
  text-decoration: none;
}


/* ─── FORM BASE ──────────────────────────────────────────────────────────────── */

.input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-base);
}

.input:focus        { border-color: var(--color-accent); }
.input::placeholder { color: var(--color-text-muted); font-weight: var(--weight-normal); }

textarea.input {
  resize: vertical;
  min-height: 60px;
  line-height: var(--leading-normal);
}


/* ─── BUTTON BASE ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-md);
  transition: opacity var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}

.btn:hover           { opacity: 0.88; }
.btn:active          { transform: scale(0.98); }
.btn:disabled        { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn-primary         { background: var(--color-accent);  color: #fff; }
.btn-dark            { background: var(--color-text);    color: #fff; }
.btn-white           { background: #fff;                 color: var(--color-text); }
.btn-success         { background: var(--color-yes);     color: #fff; }
.btn-warning         { background: var(--color-warning); color: #fff; }

.btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ccc;
}
.btn-ghost:hover     { border-color: #fff; color: #fff; opacity: 1; }

.btn-ghost-dark {
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-muted);
}
.btn-ghost-dark:hover {
  border-color: var(--color-text);
  color: var(--color-text);
  opacity: 1;
}


/* ─── BADGE BASE ─────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  line-height: 1.4;
}

.badge-l1 { background: var(--color-l1-bg); color: var(--color-l1); }
.badge-l2 { background: var(--color-l2-bg); color: var(--color-l2); }
.badge-l3 { background: var(--color-l3-bg); color: var(--color-l3); }


/* ─── UTILITIES ──────────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-1        { gap: var(--space-1); }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.ml-auto      { margin-left: auto; }
.text-muted   { color: var(--color-text-muted); }
.uppercase    { text-transform: uppercase; }
.tracking-wide  { letter-spacing: 0.08em; }
.tracking-wider { letter-spacing: 0.12em; }