/* ════════════════════════════════════════════════════════════════
   LENBIRD DESIGN TOKENS · v5.1 "Soft Premium SaaS"
   En källa för hela systemet. Alla vyer konsumerar dessa – ingen
   sida definierar egna färger, radier, skuggor eller storlekar.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Ytor */
  --app-bg: #f6f7fc;            /* arbetsytans bas: vit → mycket ljus blå/lila */
  --surface: #ffffff;           /* cards, panels, sidebar, topbar */
  --surface-soft: #f3f5fb;      /* tonade inre ytor: sök, tiles, hover */
  --surface-stage: #eef0f9;     /* builder-stage */
  --surface-hover: #eef1fa;

  /* Text */
  --text-primary: #1a1d29;
  --text-secondary: #5c6478;
  --text-muted: #8b93a6;
  --text-on-brand: #ffffff;

  /* Linjer – används sparsamt */
  --border-soft: #e9ecf5;
  --border-strong: #d9dded;

  /* Brand – blå → violett */
  --brand: #5468f0;
  --brand-strong: #4557e0;
  --brand-deep: #3a49c8;
  --brand-secondary: #8b5cf6;
  --brand-soft: #eceffe;
  --brand-soft-2: #e0e5fd;
  --brand-ring: rgba(84, 104, 240, .22);
  --brand-grad: linear-gradient(135deg, #5468f0 0%, #8b5cf6 100%);
  --brand-glow: 0 10px 24px rgba(84, 104, 240, .30);

  /* Kompletterande accenter (icon containers, charts, status) */
  --green: #16a34a;   --green-soft: #e6f6ec;
  --orange: #f0741f;  --orange-soft: #fdf0e4;
  --cyan: #0ea5c9;    --cyan-soft: #e4f6fb;
  --rose: #e0335f;    --rose-soft: #fde8ee;
  --amber: #c27a06;   --amber-soft: #fcf3dc;

  /* Status-alias */
  --ok: var(--green);      --ok-weak: var(--green-soft);
  --warn: var(--amber);    --warn-weak: var(--amber-soft);
  --danger: #d92d2d;       --danger-weak: #fde9e9;
  --info: var(--brand-strong); --info-weak: var(--brand-soft);

  /* Typografi */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-title: 28px;     /* main page title */
  --fs-entity: 26px;    /* entity title */
  --fs-kpi: 34px;       /* stora KPI-siffror */
  --fs-section: 18px;   /* section/card title */
  --fs-nav: 15.5px;
  --fs-body: 14.5px;
  --fs-meta: 13px;
  --fs-page: var(--fs-title);
  --fs-sec: var(--fs-meta);

  /* Radie */
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-large: 22px;
  --radius-chip: 999px;

  /* Skuggor – mjuka och diffusa */
  --shadow-card: 0 8px 30px rgba(46, 58, 110, .06);
  --shadow-card-hover: 0 14px 40px rgba(46, 58, 110, .10);
  --shadow-floating: 0 20px 60px rgba(46, 58, 110, .16), 0 2px 8px rgba(46, 58, 110, .06);
  --shadow-canvas: 0 30px 80px rgba(46, 58, 110, .16), 0 2px 8px rgba(46, 58, 110, .05);

  /* Mått */
  --control-height: 42px;
  --control-height-sm: 34px;
  --control-height-lg: 46px;
  --sidebar-width: 264px;
  --topbar-height: 68px;
  --content-gap: 24px;
  --content-pad: 32px;
  --fast: 140ms ease;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* ── Alias för äldre regler/vyer (allt pekar på systemet ovan) ── */
  --bg: var(--app-bg); --surface-2: var(--surface-soft); --surface-3: var(--surface-stage);
  --hover: var(--surface-hover); --hover-2: var(--brand-soft-2);
  --ink: var(--text-primary); --ink-2: var(--text-secondary); --ink-3: var(--text-muted);
  --line: var(--border-soft); --line-2: #eff1f8; --line-strong: var(--border-strong);
  --brand-weak: var(--brand-soft); --brand-weak-2: var(--brand-soft-2); --brand-2: var(--brand-secondary); --brand-2-weak: #f0eafe;
  --r-s: var(--radius-control); --r-m: var(--radius-card); --r-l: var(--radius-large);
  --sh-1: var(--shadow-card); --sh-2: var(--shadow-floating); --sh-canvas: var(--shadow-canvas);
  --ctl-h: var(--control-height); --ctl-h-sm: var(--control-height-sm);
  --blue: var(--brand); --violet: var(--brand-secondary); --ink2: var(--ink-2); --ink3: var(--ink-3); --line2: var(--line);
  --grad: var(--brand-grad); --shadow-sm: var(--shadow-card); --shadow-md: var(--shadow-floating); --r: var(--radius-large);
}