/* ============================================================
   RetMinTekst Design Tokens — SINGLE SOURCE OF TRUTH
   ============================================================
   This is the only place raw design values (colors, radii,
   shadows, fonts) may be defined. Every surface — the marketing
   site (custom.css), the editor (editor.css), and the Chrome
   extension (sidepanel.css / popup.css) — must consume these
   `--ds-*` tokens, never hardcoded hex.

   Two formal zones share these tokens:
     • WARM zone   → marketing/front page, /demo, /online-korrektur
     • NEUTRAL zone → logged-in editor + Chrome extension (workspace)
   Brand accents and correction/diff semantics are IDENTICAL across
   both zones; only the surface (bg/text/border) palette differs.

   See agent_docs/design-system.md for the full reference and rules.
   Load this file BEFORE custom.css.
   ============================================================ */

:root {
  /* --------------------------------------------------------
     1. Brand primitives (shared by both zones)
     -------------------------------------------------------- */
  --ds-teal: #0f9d8e;
  --ds-teal-bright: #14c4b2; /* premium landing brand-primary-light */
  --ds-teal-hover: #0d8276; /* links & button hover */
  --ds-teal-dark: #0c8478; /* marketing brand-teal-dark */
  --ds-teal-deep: #0a7d70; /* premium landing brand-primary-dark */
  --ds-teal-darker: #0b6f64; /* button active */
  --ds-teal-light: rgba(15, 157, 142, 0.1);
  --ds-teal-lighter: rgba(15, 157, 142, 0.05);
  --ds-coral: #e47c84;
  --ds-moss: #97aa52;
  --ds-ash: #b0cdaf;
  --ds-steel: #7fa6bc;
  --ds-jonquil: #ebc30e;

  --ds-teal-rgb: 15, 157, 142;
  --ds-coral-rgb: 228, 124, 132;
  --ds-moss-rgb: 151, 170, 82;
  --ds-ash-rgb: 176, 205, 175;
  --ds-steel-rgb: 127, 166, 188;
  --ds-jonquil-rgb: 235, 195, 14;

  /* --------------------------------------------------------
     2. Semantic / correction tokens (shared — diff & status
        must look identical on every surface)
     -------------------------------------------------------- */
  --ds-diff-added-bg: rgba(176, 205, 175, 0.25);
  --ds-diff-added-text: #059669;
  --ds-diff-removed-bg: rgba(228, 124, 132, 0.25);
  --ds-diff-removed-text: #dc2626;

  /* correction category accents */
  --ds-cat-stavefejl: var(--ds-coral);
  --ds-cat-grammatik: var(--ds-jonquil);
  --ds-cat-stilistisk: var(--ds-steel);

  /* status colors (match Bootstrap semantic roles) */
  --ds-danger: #e47c84; /* brand coral — accents/borders/backgrounds */
  --ds-danger-strong: #b3261e; /* legible error TEXT on light bg */
  --ds-success: #97aa52;
  --ds-warning: #ebc30e;
  --ds-info: #7fa6bc;

  /* "needs attention" badge pair (e.g. not-subscribed) */
  --ds-warning-bg: #fef3c7;
  --ds-warning-text: #92400e;

  /* --------------------------------------------------------
     3a. WARM zone surfaces (marketing) + warm grey scale
     -------------------------------------------------------- */
  --ds-gray-100: #faf8f3;
  --ds-gray-200: #f6f4ef;
  --ds-gray-300: #c2b8a9;
  --ds-gray-400: #a59c89;
  --ds-gray-500: #88827b;
  --ds-gray-600: #7a7363;
  --ds-gray-700: #595653;
  --ds-gray-800: #4c4a49;
  --ds-gray-900: #333333;

  --ds-warm-bg: #f6f4ef;
  --ds-warm-alt: #faf8f3;
  --ds-warm-border: rgba(194, 184, 169, 0.5);
  --ds-warm-border-translucent: rgba(194, 184, 169, 0.3);
  --ds-warm-text: #333333;
  --ds-warm-text-medium: #4c4a49;
  --ds-warm-text-light: #595653;
  --ds-warm-muted: #88827b;
  --ds-warm-muted-alt: #8a8785;

  /* --------------------------------------------------------
     3b. NEUTRAL/app zone surfaces (editor + extension)
     -------------------------------------------------------- */
  --ds-app-bg: #fafafa;
  --ds-app-surface: #ffffff;
  --ds-app-text: #1f2933;
  --ds-app-text-strong: #1f2937;
  --ds-app-muted: #6b7280;
  --ds-app-border: #e2e8f0;
  --ds-app-border-soft: #e5e7eb;
  --ds-app-bg-soft: #f9fafb;
  --ds-accent-reasoning: #6366f1; /* "?" reasoning badge — review: brand teal? */

  /* --------------------------------------------------------
     4. Shared scales
     -------------------------------------------------------- */
  /* Bootstrap-aligned radii (rem) */
  --ds-radius-xs: 0.25rem;
  --ds-radius-sm: 0.375rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 1rem;
  --ds-radius-xl: 2rem;
  --ds-radius-pill: 50rem;
  /* Soft card radii (px) used by marketing/editor cards */
  --ds-radius-card-sm: 8px;
  --ds-radius-card-md: 12px;
  --ds-radius-card-lg: 20px;
  --ds-radius-card-xl: 28px;

  --ds-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
  --ds-shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.08);
  --ds-shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.12);

  --ds-transition-fast: 0.15s ease;
  --ds-transition-normal: 0.25s ease;
  --ds-transition-slow: 0.4s ease;

  --ds-font-display: "Recoleta", serif;
  --ds-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ds-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ds-font-read: "Crimson Text", serif;
  --ds-font-read-alt: "Libre Baskerville", serif;
}