/*
 * Jobsniffer Design Tokens
 * Kilde til sandhed for alle farver, typografi og spacing.
 * Indlæses globalt via base.html og landing.html.
 * Se docs/DESIGN_BRIEF.md for fuld dokumentation.
 */

:root {

  /* ── Baggrunde ─────────────────────────────────────────────── */
  --color-bg:        #f2f2f7;
  --color-surface:   #ffffff;
  --color-surface-2: #fafafa;

  /* ── Varm platform-palet (Dashboard-B) ──────────────────────── */
  --color-bg-platform:  #f8f9fc;
  --color-surface-warm: #fffdf9;
  --color-surface-soft: #fffaf2;
  --color-border-warm:  #ece7dc;
  --color-muted-warm:   #7b8190;
  --shadow-platform:    0 8px 20px rgba(15, 23, 42, 0.06);

  /* ── Badge tekst- og baggrunds-farver ────────────────────────── */
  --color-accent-text:  #0071e3;
  --color-success-text: #1a7f3c;
  --color-warning-text: #c05300;
  --color-danger-text:  #c0392b;
  --color-muted-bg:     #f0f0f5;
  --color-muted-text:   #6e6e73;

  /* ── Kanter ────────────────────────────────────────────────── */
  --color-border:         #e5e5ea;
  --color-border-light:   #e9ecef;
  --color-border-form:    #ced4da;
  --color-border-accent:  #dbe3ef;
  --color-divider-subtle: #f1f3f4;

  /* ── Tekst ─────────────────────────────────────────────────── */
  --color-text:            #1c1c1e;
  --color-muted:           #8e8e93;
  --color-text-dark:       #1f2a37;
  --color-text-secondary:  #495057;
  --color-text-heavy:      #212529;
  --color-text-muted-dark: #4b5563;

  /* ── Baggrunde — ekstra ────────────────────────────────────── */
  --color-bg-light:   #f8f9fa;
  --color-bg-soft:    #f5f7fb;
  --color-bg-input:   #f3f6fb;

  /* ── Hover-effekter ────────────────────────────────────────── */
  --color-hover-accent:    #eef4ff;
  --color-accent-bg-light: #e8efff;
  --color-accent-blue:     #2f67e8;

  /* ── Alert-kanter ──────────────────────────────────────────── */
  --color-success-border: #badbcc;
  --color-danger-border:  #f5c6cb;

  /* ── Scrollbar ─────────────────────────────────────────────── */
  --color-scrollbar-track:       #f1f1f1;
  --color-scrollbar-thumb:       #c1c1c1;
  --color-scrollbar-thumb-hover: #a8a8a8;

  /* ── Skeleton loading ──────────────────────────────────────── */
  --color-skeleton-base:  #f0f0f0;
  --color-skeleton-light: #e0e0e0;

  /* ── Accent (erstatter al lilla #667eea / #764ba2) ─────────── */
  --color-accent:    #007aff;
  --color-accent-bg: #e8f1fb;
  --color-accent-dark: #0055cc;

  /* ── Terminal / developer output ────────────────────────────── */
  --color-terminal-bg: #1f2937;
  --color-terminal-text: #e5e7eb;
  --color-terminal-system: #a78bfa;
  --color-terminal-user: #60a5fa;
  --color-terminal-assistant: #4ade80;

  /* ── Status ────────────────────────────────────────────────── */
  --color-success:   #30d158;
  --color-success-bg: #e9f9ee;
  --color-warning:   #ff9f0a;
  --color-warning-bg: #fff3e0;
  --color-danger:    #ff453a;
  --color-danger-bg: #fff0ee;
  --color-info:      #17a2b8;
  --color-info-bg:   #e8f4f8;

  /* ── Skygger ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --shadow-md: 0 2px 8px rgba(15,23,42,.08);

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ── Typografi ─────────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   22px;
  --text-2xl:  28px;

  /* ── Spacing ───────────────────────────────────────────────── */
  --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;

  /* ── Layout ────────────────────────────────────────────────── */
  --max-width: 1120px;
  --navbar-height: 52px;

  /* ── Transitions ───────────────────────────────────────────── */
  --transition: all 0.15s ease;
}

/* ── Global base styles ──────────────────────────────────────── */
/* Reserver plads til lodret scrollbar så layout ikke skifter mellem korte/lange sider */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Badge komponent ─────────────────────────────────────────── */
.badge-js-blue   { background: var(--color-accent-bg);  color: var(--color-accent-text); }
.badge-js-green  { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-js-orange { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-js-red    { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.badge-js-gray   { background: var(--color-muted-bg);   color: var(--color-muted-text); }