/* ============================================================
   CYBERPERSPECTIEF / CYBERASSISTENT — Design Tokens
   colors_and_type.css  ·  single source of truth

   Light mode is default. Dark sidebar (#000029) is the anchor
   in BOTH modes. Toggle dark mode with [data-theme="dark"].
   ============================================================ */

/* League Spartan Bold — headings (local file) */
@font-face {
  font-family: 'League Spartan';
  src: url('fonts/LeagueSpartan-Bold.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
/* Open Sans — body · via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=League+Spartan:wght@400;600;700&display=swap');


/* ── BRAND (mode-independent) ────────────────────────────── */
:root {
  --color-accent:       #ff4a36;
  --color-accent-hover: #e03a28;
  --color-accent-soft:  rgba(255, 74, 54, 0.12);

  /* Fonts */
  --font-heading: 'League Spartan', sans-serif;
  --font-body:    'Open Sans', sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px — labels, metadata, table heads */
  --text-sm:   0.875rem;   /* 14px — secondary text, badges */
  --text-base: 1rem;       /* 16px — body, form labels */
  --text-lg:   1.125rem;   /* 18px — card titles */
  --text-xl:   1.25rem;    /* 20px — section heads */
  --text-2xl:  1.5rem;     /* 24px — page titles (admin H1) */
  --text-3xl:  1.875rem;   /* 30px — participant question text */
  --text-4xl:  2.25rem;    /* 36px — marketing hero */

  /* Spacing — 8px grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

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

  /* Layout */
  --sidebar-width:      192px;
  --header-height:      56px;
  --content-max-width:  1280px;
  --content-padding-x:  var(--space-10);
  --content-padding-y:  var(--space-8);
}


/* ── LIGHT MODE (default) ────────────────────────────────── */
:root {
  --color-bg-page:           #f4f4fa;
  --color-bg-surface:        #ffffff;
  --color-bg-sidebar:        #000029;   /* always dark */
  --color-bg-sidebar-active: #0a0a3f;
  --color-bg-input:          #ffffff;
  --color-bg-hover:          #f0f0f8;

  --color-text-primary:   #1b1b2f;
  --color-text-secondary: #6b6b8a;
  --color-text-muted:     #a0a0c0;
  --color-text-on-dark:   #ffffff;
  --color-text-on-accent: #ffffff;
  --color-text-label:     #8888aa;

  --color-border:       #e5e5ef;
  --color-border-focus: #ff4a36;

  --color-success-bg:   #d1fae5;
  --color-success-text: #065f46;
  --color-success-dot:  #22c55e;
  --color-error-bg:     rgba(255, 74, 54, 0.08);
  --color-error-text:   #ff4a36;

  --shadow-sm:  0 1px 3px rgba(27, 27, 47, 0.06);
  --shadow-md:  0 4px 16px rgba(27, 27, 47, 0.10);
}


/* ── DARK MODE ───────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-page:           #070a1c;
  --color-bg-surface:        #0f1235;
  --color-bg-sidebar:        #000029;   /* unchanged */
  --color-bg-sidebar-active: #1a1a4a;
  --color-bg-input:          #0f1235;
  --color-bg-hover:          #161840;

  --color-text-primary:   #e8e8f2;
  --color-text-secondary: #8080a8;
  --color-text-muted:     #5a5a7a;
  --color-text-on-dark:   #ffffff;
  --color-text-label:     #6060a0;

  --color-border:       #1e2045;
  --color-border-focus: #ff4a36;

  --color-success-bg:   rgba(34, 197, 94, 0.15);
  --color-success-text: #4ade80;
  --color-success-dot:  #22c55e;
  --color-error-bg:     rgba(255, 74, 54, 0.15);
  --color-error-text:   #ff6b5a;

  --shadow-sm:  0 1px 3px rgba(0, 0, 20, 0.30);
  --shadow-md:  0 4px 16px rgba(0, 0, 20, 0.40);
}


/* ── ELEMENT DEFAULTS ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p { margin: 0; color: var(--color-text-secondary); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--color-accent-hover); }


/* ── UTILITY / COMPONENT CLASSES ─────────────────────────── */

/* Section / table labels — League Spartan uppercase */
.label-section, .table-header {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-label);
}
.table-header { letter-spacing: 0.06em; }

/* Buttons */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--color-accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.btn-secondary:hover { border-color: var(--color-text-secondary); background: var(--color-bg-hover); }

.btn-danger {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: var(--color-accent-soft); }

/* Status badge */
.badge-success {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Inputs */
.input, .textarea {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  width: 100%;
  transition: border-color 0.15s;
}
.input:focus, .textarea:focus { outline: none; border-color: var(--color-border-focus); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }