/* ============================================================
   StuderaHP Design Tokens — single source of truth
   Importeras automatiskt av functions.php på alla sidor
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800;900&family=Open+Sans:wght@400;500;600;700&display=swap");

:root {
  /* Typsnitt */
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-reading: "Open Sans", "Inter", system-ui, sans-serif;

  /* Färger — blå */
  --blue-50:  #eff6ff;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --focus-ring: rgba(37, 99, 235, 0.18);

  /* Färger — semantiska */
  --success:        #16a34a;
  --success-bg:     #f0fdf4;
  --success-border: rgba(22, 163, 74, 0.3);
  --error:          #dc2626;
  --error-bg:       #fef2f2;
  --error-border:   rgba(220, 38, 38, 0.3);

  /* Neutrala */
  --ink:           #0f172a;
  --ink-muted:     #64748b;
  --ink-faint:     #94a3b8;
  --surface:       #ffffff;
  --bg:            #f8fafc;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  /* Radier */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* Skuggor */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 24px 60px rgba(15, 23, 42, 0.14);

  /* Knappar */
  --btn-h:      40px;
  --btn-h-sm:   34px;
  --btn-px:     20px;
  --btn-radius: var(--r-md);
  --btn-font:   600 14px/1 var(--font-ui);

  /* Sidebar */
  --sidebar-width: 260px;
}