/* ============================================================
   SGN Kundenportal — Design-Tokens (Handoff)
   Drop-in CSS-Custom-Properties + Bootstrap-5-Mapping.
   Bindet die Marken-Tokens von 47GradNord in euer Symfony/
   Bootstrap-Projekt ein. In eurem Haupt-Stylesheet importieren
   ODER nach dem Bootstrap-CSS laden.
   Schriften: ../fonts/  ·  Logos: /img/logos/
   ============================================================ */

/* ---- Webfonts (Pfade an euren public/-Aufbau angepasst) ---- */
@font-face { font-family:"Teko";   font-weight:300; font-display:swap; src:url("../fonts/teko-v22-latin-300.woff2") format("woff2"); }
@font-face { font-family:"Teko";   font-weight:400; font-display:swap; src:url("../fonts/teko-v22-latin-regular.woff2") format("woff2"); }
@font-face { font-family:"Teko";   font-weight:600; font-display:swap; src:url("../fonts/teko-v22-latin-600.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:300; font-display:swap; src:url("../fonts/barlow-v12-latin-300.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:400; font-display:swap; src:url("../fonts/barlow-v12-latin-regular.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:700; font-display:swap; src:url("../fonts/barlow-v12-latin-700.woff2") format("woff2"); }

:root {
  /* ---- Marke ---- */
  --color-primary: #e44a1f;         /* 47gradnord-Orange, Hauptaktionen */
  --color-primary-hover: #b83712;   /* Hover/Pressed */
  --color-primary-light: #ff9c75;   /* Koralle, sekundäre Akzente */
  --color-primary-pastel: #feddbc;  /* Sand, aktive Tabs, Tinting */
  --color-primary-soft: #fadbd2;    /* Orange 20 %, weiche Flächen */
  --color-on-primary: #ffffff;
  --brand-aubergine: #43345a;       /* Sidebar, Überschriften, dunkle Flächen */

  /* ---- Neutrals (warm) ---- */
  --color-text-primary: #282828;
  --color-text-secondary: #555555;
  --color-text-muted: #7c7c7c;
  --color-border: #e7e5df;          /* Hairline */
  --color-border-strong: #cfccc3;
  --color-surface-0: #f5f4f1;       /* Seiten-Hintergrund */
  --color-surface-1: #ffffff;       /* Card */
  --color-surface-2: #ffffff;       /* Elevated Card/Popover (+ Border) */
  --brand-sand-20: #fff8f0;         /* Zeilen-Hover (aus Design-Handoff) */

  /* ---- Semantik ---- */
  --color-success: #10b981;  --color-success-soft: #e7f7f0;
  --color-info:    #3b82f6;  --color-info-soft:    #e8f0fe;
  --color-warning: #f59e0b;  --color-warning-soft: #fdf1dd;
  --color-danger:  #ef4444;  --color-danger-soft:  #fdeaea;

  /* ---- Task-Status-Palette (5 Status × 3 Stops) ----
     bg = Kreisfüllung · bd = Rand · ic = Icon-Farbe · Feather-Icon */
  --task-todo-bg:#F1EFE8;      --task-todo-bd:#D3D1C7;      --task-todo-ic:#444441;      /* circle */
  --task-progress-bg:#E6F1FB;  --task-progress-bd:#B5D4F4;  --task-progress-ic:#185FA5;  /* clock */
  --task-wait-cust-bg:#FAEEDA; --task-wait-cust-bd:#FAC775; --task-wait-cust-ic:#854F0B; /* message-circle */
  --task-wait-int-bg:#E1F5EE;  --task-wait-int-bd:#9FE1CB;  --task-wait-int-ic:#0F6E56;  /* pause-circle */
  --task-done-bg:#EAF3DE;      --task-done-bd:#C0DD97;      --task-done-ic:#3B6D11;      /* check-circle */

  /* ---- Assignee-Chips ---- */
  --assignee-team-bg:#E6F1FB; --assignee-team-fg:#0C447C; --assignee-team-bd:#B5D4F4;
  --assignee-cust-bg:#FAECE7; --assignee-cust-fg:#712B13; --assignee-cust-bd:#F5C4B3;

  /* ---- Typografie ---- */
  --font-display:"Teko","Oswald","Arial Narrow",sans-serif;  /* Überschriften, Zahlen, Eyebrows */
  --font-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ---- Abstände (4-px-Basis) ---- */
  --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;

  /* ---- Radius / Schatten / Motion ---- */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --portal-radius:12px;         /* Standard-Card-Radius im Portal */
  --portal-radius-sm:8px;
  --shadow-xs:0 1px 2px rgba(67,52,90,.06);
  --shadow-sm:0 2px 6px rgba(67,52,90,.08);
  --shadow-md:0 8px 24px rgba(67,52,90,.10);
  --shadow-lg:0 18px 48px rgba(67,52,90,.14);
  --shadow-brand:0 12px 30px rgba(228,74,31,.28);  /* Orange-Leuchten auf primären CTAs */
  --icon-xs:14px; --icon-sm:18px; --icon-md:24px; --icon-lg:32px;
  --dur-fast:120ms; --dur-base:200ms; --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Bootstrap-5-Mapping — überschreibt die Bootstrap-Variablen,
   damit btn-primary, badges, borders etc. automatisch passen.
   ============================================================ */
:root {
  --bs-primary:#e44a1f;
  --bs-primary-rgb:228,74,31;
  --bs-body-font-family:var(--font-body);
  --bs-body-color:var(--color-text-primary);
  --bs-body-bg:var(--color-surface-0);
  --bs-border-color:var(--color-border);
  --bs-border-radius:var(--portal-radius);
  --bs-border-radius-sm:var(--portal-radius-sm);
  --bs-success:#10b981; --bs-info:#3b82f6; --bs-warning:#f59e0b; --bs-danger:#ef4444;
  --bs-link-color:#e44a1f; --bs-link-hover-color:#b83712;
}

/* Überschriften in Teko (Bootstrap setzt sonst die Body-Schrift) */
h1,h2,h3,.h1,.h2,.h3,.display-1,.display-2,.display-3 {
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.05;
  letter-spacing:.005em;
  color:var(--brand-aubergine);
}

/* Primär-Button mit Marken-Leuchten */
.btn-primary {
  --bs-btn-bg:var(--color-primary);
  --bs-btn-border-color:var(--color-primary);
  --bs-btn-hover-bg:var(--color-primary-hover);
  --bs-btn-hover-border-color:var(--color-primary-hover);
  --bs-btn-active-bg:var(--color-primary-hover);
  font-weight:700;
}

/* Eyebrow / Kicker */
.eyebrow {
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-primary); line-height:1;
}