/* ============================================================
   JustClose · Design Tokens (subset for Dashboard)
   Colors, type, spacing, radii. Single source of truth.
   ============================================================ */

:root {
  /* ----- Type ----- */
  --ff-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-hero:    "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ----- Colors ----- */
  --c-dark:           #222222;
  --c-blue:           #4D97FE;  /* Accent — only accent in use */
  --c-cyan:           #9CECFB;
  --c-warning:        #C0392B;
  --c-white:          #FFFFFF;

  --c-bg:             #F4F4F2;  /* page background (dashboard + artifact page) */
  --c-highlight-bg:   #E3EFFF;  /* tint of blue */
  --c-accent-bg-cyan: #EAF9FE;
  --c-warning-bg:     #FFF0F0;
  --c-neutral-bg:     #F2F2F2;
  --c-row-bg:         #F9F9F9;

  --c-text:           #333333;
  --c-text-strong:    #222222;
  --c-text-muted:     #505050;
  --c-text-dim:       #646464;
  --c-text-hint:      #5A6B7D;
  --c-text-on-dark:   #FFFFFF;

  --c-border:         #D0D0D0;
  --c-border-accent:  #4D97FE;
  --c-border-soft:    #E5E7EB;

  /* Pending / "warte auf Aktion" — used ONLY for active gate badges. */
  --c-pending-bg:     #FFF6DC;
  --c-pending-fg:     #7a5600;
  --c-pending-dot:    #f0b429;
  --c-pending-strong: #b88700;

  /* ----- Spacing ----- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;

  /* ----- Radii ----- */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ----- Shadow (used sparingly) ----- */
  --shadow-sm: 0 1px 2px rgba(34,34,34,0.06);
  --shadow-md: 0 4px 12px rgba(34,34,34,0.08);
  --shadow-lg: 0 12px 32px rgba(34,34,34,0.10);
}

/* ============================================================
   Manrope (variable, VENDORED — kein externer Fetch, CSP font-src 'self')
   Eine Datei je Subset, alle Gewichte 200–800 darin. Die unicode-range-
   Angaben entsprechen den Standard-Subsets von Google Fonts, damit der
   Browser nur die Subsets laedt, die die Seite tatsaechlich braucht.
   ============================================================ */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./vendor/fonts/manrope-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./vendor/fonts/manrope-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./vendor/fonts/manrope-var-greek.woff2") format("woff2");
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./vendor/fonts/manrope-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./vendor/fonts/manrope-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./vendor/fonts/manrope-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Dark-Theme "portal-dark" (Kundenportal, nur index.html)
   Ueberschreibt den hellen Satz oben AUSSCHLIESSLICH unter dem
   data-theme-Selektor — artifact.html und operator.html laden
   dieselbe Datei und bleiben deshalb unveraendert hell.
   ============================================================ */

:root[data-theme="portal-dark"] {
  /* ----- Type ----- */
  --ff-display: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-text:    "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-hero:    "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ----- Neue Portal-Tokens ----- */
  --c-accent:         #40E5C4;
  --c-accent-2:       #2F8CE8;
  --c-accent-soft:    #8AF2DC;
  --c-on-accent:      #052620;

  --c-surface:        rgba(255, 255, 255, .045);
  --c-surface-2:      rgba(255, 255, 255, .07);
  --c-surface-border: rgba(255, 255, 255, .09);

  --c-text:           #EEF6F5;
  --c-text-muted:     rgba(238, 246, 245, .55);
  --c-text-hint:      rgba(238, 246, 245, .45);
  --c-text-faint:     rgba(238, 246, 245, .35);

  --r-card:   26px;
  --r-inner:  16px;
  --r-pill:   999px;

  --shadow-card: 0 18px 48px rgba(0, 0, 0, .38);
  --blur-card:   blur(20px);

  /* ----- Status (kontrastgeprueft auf #0A1014) ----- */
  --c-status-done:        #40E5C4;  /* ~11:1 auf #0A1014 */
  --c-status-progress:    #F5B544;  /* ~10:1 */
  --c-status-warning:     #FF7A7A;  /* ~7:1 */
  --c-status-blocked:     #FF7A7A;
  --c-status-done-bg:     rgba(64, 229, 196, .12);
  --c-status-progress-bg: rgba(245, 181, 68, .13);
  --c-status-warning-bg:  rgba(255, 122, 122, .12);

  /* ----- Bestehende Tokens auf Dark-Entsprechungen ----- */
  --c-dark:           #EEF6F5;            /* war Textfarbe -> hell */
  --c-blue:           #40E5C4;            /* Akzent des Portals */
  --c-cyan:           #8AF2DC;
  --c-warning:        #FF7A7A;
  --c-white:          rgba(255, 255, 255, .045);  /* "Flaeche", nicht mehr Weiss */

  --c-bg:             #0A1014;
  --c-highlight-bg:   rgba(64, 229, 196, .12);
  --c-accent-bg-cyan: rgba(47, 140, 232, .14);
  --c-warning-bg:     rgba(255, 122, 122, .12);
  --c-neutral-bg:     rgba(255, 255, 255, .06);
  --c-row-bg:         rgba(255, 255, 255, .03);

  --c-text-strong:    #EEF6F5;
  --c-text-dim:       rgba(238, 246, 245, .45);
  --c-text-soft:      rgba(238, 246, 245, .55);
  --c-text-on-dark:   #052620;            /* Text AUF dem Akzent */

  --c-border:         rgba(255, 255, 255, .12);
  --c-border-accent:  rgba(64, 229, 196, .55);
  --c-border-soft:    rgba(255, 255, 255, .09);

  --c-pending-bg:     rgba(245, 181, 68, .13);
  --c-pending-fg:     #F5B544;
  --c-pending-dot:    #F5B544;
  --c-pending-strong: #FFCB6B;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .40);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, .48);
}