/* ═══════════════════════════════════════════════════════════════
   MOREMEDIA® Master AI — Colors & Type
   Source-of-truth tokens for all four surfaces.
   Light is the default. Dark via [data-theme="dark"].
═══════════════════════════════════════════════════════════════ */

/* ── Web fonts (local woff2) ──────────────────────────────── */
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('../fonts/SctoGroteskA-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('../fonts/SctoGroteskA-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('../fonts/SctoGroteskA-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('../fonts/SctoGroteskA-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Scto Grotesk A';
  src: url('../fonts/SctoGroteskA-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Light (default) ──────────────────────────────────────── */
:root {
  /* Type families — Scto Grotesk A for UI/display, JetBrains Mono for code/metrics */
  --font-ui:      'Scto Grotesk A', system-ui, sans-serif;
  --font-display: 'Scto Grotesk A', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --t-xs:   11px;
  --t-sm:   12px;
  --t-base: 14px;
  --t-md:   15px;
  --t-lg:   17px;
  --t-xl:   20px;
  --t-2xl:  26px;
  --t-3xl:  32px;
  --t-disp: 52px;

  /* Backgrounds — warm stone */
  --bg-base:    #F7F6F2;  /* page */
  --bg-surface: #FFFFFF;  /* card / sidebar / header */
  --bg-el:      #F0EDE6;  /* elevated rows, code, inset */
  --bg-ov:      #E8E4DA;  /* overlay, table header */
  --bg-sunken:  #EFECE3;  /* sunken inset (rails, prompts) */

  /* Borders — warm dark brown at low opacity, never neutral gray */
  --bdr-faint:  rgba(40,35,20,0.07);
  --bdr-def:    rgba(40,35,20,0.13);
  --bdr-str:    rgba(40,35,20,0.22);

  /* Text */
  --tx-0: #1C1917;   /* primary */
  --tx-1: #4A4540;   /* secondary */
  --tx-2: #8A8478;   /* muted, label */

  /* Accent (active nav, focus) */
  --ac-0:  #7A756E;
  --ac-1:  #5A5550;
  --ac-2:  #7A6B52;
  --ac-bg: rgba(90,85,80,0.06);

  /* Semantic — fg + bg tint + border triplets */
  --ok:  #1A7B52; --ok-bg:  rgba(26,123,82,0.08);  --ok-bd:  rgba(26,123,82,0.22);
  --wa:  #A06020; --wa-bg:  rgba(160,96,32,0.08);  --wa-bd:  rgba(160,96,32,0.22);
  --er:  #A83030; --er-bg:  rgba(168,48,48,0.08);  --er-bd:  rgba(168,48,48,0.22);
  --inf: #2B6CB0; --inf-bg: rgba(43,108,176,0.08); --inf-bd: rgba(43,108,176,0.22);

  /* Forecast-Stadien (geplant/verrechenbar/rechnungsentwurf/aussenstand/wiederkehrend) */
  --st-geplant:          #5B8DEF;
  --st-verrechenbar:     #F4A83B;
  --st-rechnungsentwurf: #8E6FD4;
  --st-aussenstand:      #E36366;
  --st-wiederkehrend:    #46C39F;

  /* MOREMEDIA App – Task-Status (E1, Farben wie in ClickUp; „startbereit“ blau statt rot) + Hintergrund-Tönung */
  --task-nicht-startbereit: #87909E; --task-nicht-startbereit-bg: rgba(135,144,158,0.12);
  --task-startbereit:       #0284C7; --task-startbereit-bg:       rgba(2,132,199,0.10);   /* ruhiges Blau statt Rot (30.09.) */
  --task-in-arbeit:         #C98E00; --task-in-arbeit-bg:         rgba(201,142,0,0.12);
  --task-warten-intern:     #3E63DD; --task-warten-intern-bg:     rgba(62,99,221,0.10);
  --task-warten-extern:     #A044AE; --task-warten-extern-bg:     rgba(160,68,174,0.10);
  --task-abgeschlossen:     #1A7B52; --task-abgeschlossen-bg:     rgba(26,123,82,0.10);

  /* MOREMEDIA App – Department-Farben (Auswahl im Admin-UI „App-Einstellungen“) */
  --dep-konzept:          #C2570C;
  --dep-grafik:           #BE3A76;
  --dep-entwicklung:      #0E7490;
  --dep-online-marketing: #4D7C0F;
  --dep-5:                #6D4AC9;
  --dep-6:                #A86A12;
  --dep-7:                #2F6FA8;
  --dep-8:                #6B655E;

  /* Legacy aliases — Code referenziert teilweise ältere Token-Namen.
     Single source of truth bleiben die obigen Variablen; diese sind nur Mappings. */
  --bg-0:    var(--bg-surface);
  --bg-1:    var(--bg-el);
  --bg-2:    var(--bg-ov);
  --ac-ok:   var(--ok);
  --ac-er:   var(--er);
  --ac-wa:   var(--wa);
  --bdr-sub: var(--bdr-faint);

  /* Spacing scale */
  --sp-xs:  2px;
  --sp-sm:  6px;
  --sp-md:  14px;
  --sp-lg:  22px;
  --sp-xl:  32px;
  --sp-2xl: 48px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 10px;
  /* Token-Cleanup-Haertung 2026-06-26 (additiv, fuer wertgleiche Tokenisierung) */
  --tx-muted:#6B655E;
  --t-eyebrow:10px; --t-body:13px; --t-h-lg:22px; --t-h1:24px; --t-stat:30px;
  --r-xs:3px; --r-full:9999px;
  --sp-1:4px; --sp-2:8px; --sp-2-5:10px; --sp-3:12px; --sp-4:16px; --sp-4-5:18px; --sp-6:24px; --sp-7:28px;
  /* Einheitliche Content-Breite aller Surfaces (Fix A, 2026-07-26) */
  --content-max: 1240px;


  color-scheme: light;
}

/* ── Dark — [data-theme="dark"] ───────────────────────────── */
[data-theme="dark"] {
  --bg-base:    #181715;
  --bg-surface: #222018;
  --bg-el:      #2C2923;
  --bg-ov:      #383428;
  --bg-sunken:  #1F1D19;

  --bdr-faint:  rgba(210,200,180,0.05);
  --bdr-def:    rgba(210,200,180,0.14);
  --bdr-str:    rgba(210,200,180,0.26);

  --tx-0: #EDE8E0;
  --tx-1: #B0A898;
  --tx-2: #787060;

  --ac-0:  #A8A09A;
  --ac-1:  #C4BEB6;
  --ac-2:  #DAD4CC;
  --ac-bg: rgba(196,190,182,0.07);

  --ok:  #3DB87A; --ok-bg:  rgba(61,184,122,0.07);  --ok-bd:  rgba(61,184,122,0.18);
  --wa:  #C4853A; --wa-bg:  rgba(196,133,58,0.07);  --wa-bd:  rgba(196,133,58,0.18);
  --er:  #C85050; --er-bg:  rgba(200,80,80,0.07);   --er-bd:  rgba(200,80,80,0.18);
  --inf: #5A8AC0; --inf-bg: rgba(90,138,192,0.07);  --inf-bd: rgba(90,138,192,0.18);

  /* Forecast-Stadien — Dark-Variants */
  --st-geplant:          #7BA0F5;
  --st-verrechenbar:     #F6B95C;
  --st-rechnungsentwurf: #A78CE0;
  --st-aussenstand:      #F08486;
  --st-wiederkehrend:    #5FD5B3;

  --task-nicht-startbereit: #9AA2AE; --task-nicht-startbereit-bg: rgba(154,162,174,0.12);
  --task-startbereit:       #38BDF8; --task-startbereit-bg:       rgba(56,189,248,0.12);
  --task-in-arbeit:         #F2B83A; --task-in-arbeit-bg:         rgba(242,184,58,0.12);
  --task-warten-intern:     #7B97F0; --task-warten-intern-bg:     rgba(123,151,240,0.12);
  --task-warten-extern:     #C77AD4; --task-warten-extern-bg:     rgba(199,122,212,0.12);
  --task-abgeschlossen:     #3DB87A; --task-abgeschlossen-bg:     rgba(61,184,122,0.12);

  --dep-konzept:          #F08A45;
  --dep-grafik:           #E9729F;
  --dep-entwicklung:      #3FB3CF;
  --dep-online-marketing: #8FC04A;
  --dep-5:                #A18BF0;
  --dep-6:                #D9A04A;
  --dep-7:                #6FA6DA;
  --dep-8:                #A8A09A;

  color-scheme: dark;
}

/* ── Semantic element styles ─────────────────────────────── */
body {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--tx-0);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--font-ui); font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--tx-0); }
h2 { font-family: var(--font-ui); font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--tx-0); }
h3 { font-family: var(--font-ui); font-size: var(--t-xl);  font-weight: 500; color: var(--tx-0); }
h4 { font-family: var(--font-ui); font-size: var(--t-lg);  font-weight: 500; color: var(--tx-0); }
p  { color: var(--tx-1); line-height: 1.65; }
strong, b { font-weight: 700; color: var(--tx-0); }
em, i     { font-style: italic; }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }
pre { background: var(--bg-el); border-radius: var(--r-sm); }
/* technische Begriffe im Fließtext: gedimmt + Monospace, ohne Hintergrund-Chip */
code:not(pre code) { color: var(--tx-2); }

/* Hero / display — Scto Grotesk A Bold at large size with tight tracking */
.display {
  font-family: var(--font-display);
  font-size: var(--t-disp);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Section labels — 11px, 500, uppercase, ls 0.08–0.09em, tx-2 */
.label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tx-2);
}

/* Mono-style metric values */
.metric {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--tx-0);
}