/* =====================================================================
   AiPublix — Marketing Pipeline · Design Tokens
   Internal operations console. White surfaces, dark-red accent (#c21500).
   Import this file, then use the CSS custom properties below.
   Font: IBM Plex Sans (UI) + IBM Plex Mono (IDs, timestamps, numerics).
   Load fonts via:
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ===================================================================== */

:root {
  /* ---- Brand red (sampled from logo: #c21500) ---- */
  --red-50:  #fdf3f0;
  --red-100: #fbe3dd;
  --red-200: #f6c2b7;
  --red-300: #ee9685;
  --red-400: #e15b44;
  --red-500: #d12c12;
  --red-600: #c21500;   /* PRIMARY — logo red */
  --red-700: #a31200;
  --red-800: #850f00;
  --red-900: #6b0e02;

  /* ---- Neutrals (cool slate-gray, precise & calm) ---- */
  --white:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-150: #eaecef;
  --gray-200: #e3e6ea;
  --gray-300: #d3d8de;
  --gray-400: #aeb5bd;
  --gray-500: #7c848d;
  --gray-600: #5b636c;
  --gray-700: #3f464e;
  --gray-800: #2a2f35;
  --gray-900: #181b1f;

  /* ---- Semantic surfaces ---- */
  --bg-app:        var(--gray-50);   /* page canvas behind content */
  --bg-surface:    var(--white);     /* cards, panels, tables */
  --bg-subtle:     var(--gray-50);   /* zebra rows, inset blocks */
  --bg-muted:      var(--gray-100);  /* hover rows, disabled fills */
  --bg-inverse:    var(--gray-900);

  /* ---- Text ---- */
  --fg-strong:  var(--gray-900);  /* headings, key values */
  --fg-default: var(--gray-800);  /* body */
  --fg-muted:   var(--gray-600);  /* secondary labels */
  --fg-subtle:  var(--gray-500);  /* meta, timestamps, placeholders */
  --fg-onred:   #ffffff;
  --fg-link:    var(--red-700);

  /* ---- Borders ---- */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus:  var(--red-600);
  --divider:       var(--gray-150);

  /* ---- Accent / primary action ---- */
  --accent:        var(--red-600);
  --accent-hover:  var(--red-700);
  --accent-press:  var(--red-800);
  --accent-soft:   var(--red-50);
  --accent-soft-border: var(--red-100);
  --focus-ring:    color-mix(in srgb, var(--red-600) 35%, transparent);

  /* ===== STATUS / ARBEITSSTÄNDE (subtle tinted badges) =====
     Each has: -fg (text/icon), -bg (tint), -bd (border). */
  /* Entwurf — Draft (neutral gray) */
  --st-draft-fg: #5b636c; --st-draft-bg: #f1f3f5; --st-draft-bd: #e3e6ea;
  /* Hochgeladen — Uploaded (steel slate) */
  --st-upload-fg: #3a5169; --st-upload-bg: #eef2f6; --st-upload-bd: #d6e0ea;
  /* Zu prüfen — In Review (amber) */
  --st-review-fg: #8a5a06; --st-review-bg: #fdf4e3; --st-review-bd: #f4e2bd;
  /* Freigegeben — Approved (green) */
  --st-approved-fg: #1d6b3f; --st-approved-bg: #ecf6ef; --st-approved-bd: #c9e6d3;
  /* Abgelehnt — Rejected (tinted red) */
  --st-rejected-fg: #a31200; --st-rejected-bg: #fdf3f0; --st-rejected-bd: #f6c2b7;
  /* Abgeschlossen — Completed (terminal ink) */
  --st-done-fg: #2a2f35; --st-done-bg: #eaecef; --st-done-bd: #d3d8de;
  /* Fehler — Error (filled, alarming) */
  --st-error-fg: #ffffff; --st-error-bg: #a31200; --st-error-bd: #850f00;

  /* ===== Feedback / alerts ===== */
  --info-fg: #3a5169;  --info-bg: #eef2f6;  --info-bd: #d6e0ea;
  --success-fg: #1d6b3f; --success-bg: #ecf6ef; --success-bd: #c9e6d3;
  --warning-fg: #8a5a06; --warning-bg: #fdf4e3; --warning-bd: #f4e2bd;
  --danger-fg: #a31200;  --danger-bg: #fdf3f0;  --danger-bd: #f6c2b7;

  /* ===== Typography ===== */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — desktop-first, compact. */
  --text-display:  28px;  /* page title (rare) */
  --text-h1:       22px;  /* screen title */
  --text-h2:       17px;  /* section heading */
  --text-h3:       15px;  /* card / panel heading */
  --text-base:     14px;  /* body, table cells */
  --text-sm:       13px;  /* secondary, dense tables */
  --text-xs:       12px;  /* meta, badges, labels */
  --text-2xs:      11px;  /* overline / eyebrow */

  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-normal:1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;   /* overlines, table headers */
  --tracking-wider: 0.08em;

  /* ===== Spacing — 4px base ===== */
  --space-0: 0;
  --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;

  /* ===== Radii — tight, tool-like ===== */
  --radius-xs: 2px;   /* badges, tags */
  --radius-sm: 4px;   /* inputs, buttons */
  --radius-md: 6px;   /* cards, panels */
  --radius-lg: 8px;   /* modals, dialogs */
  --radius-full: 999px;

  /* ===== Elevation — minimal; structure comes from borders ===== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(24,27,31,0.04);
  --shadow-sm: 0 1px 2px rgba(24,27,31,0.06), 0 1px 3px rgba(24,27,31,0.04);
  --shadow-md: 0 2px 4px rgba(24,27,31,0.06), 0 4px 12px rgba(24,27,31,0.08);
  --shadow-pop: 0 6px 16px rgba(24,27,31,0.12), 0 2px 6px rgba(24,27,31,0.08);

  /* ===== Layout ===== */
  --nav-top-h: 52px;       /* global top bar */
  --nav-side-w: 220px;     /* main navigation */
  --nav-side-w-collapsed: 56px;
  --content-max: 1280px;   /* readable content cap */
  --content-pad: 24px;

  /* ===== Motion — subtle, no bounce ===== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
}

/* =====================================================================
   Base element styles (semantic). Opt-in: scope under a class if needed.
   ===================================================================== */
.ds-scope, body.ds {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
.ds-display { font-size: var(--text-display); font-weight: var(--weight-bold);   line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.ds-h1 { font-size: var(--text-h1); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.ds-h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--fg-strong); }
.ds-h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--fg-strong); }
.ds-body { font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.ds-sm  { font-size: var(--text-sm); line-height: var(--leading-snug); }
.ds-meta { font-size: var(--text-xs); color: var(--fg-subtle); }
.ds-overline { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); }
.ds-mono { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ds-num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

a.ds-link, .ds-link { color: var(--fg-link); text-decoration: none; }
a.ds-link:hover, .ds-link:hover { text-decoration: underline; text-underline-offset: 2px; }