/* ============================================================
   CODLAB Design Tokens — Single Source of Truth
   ============================================================
   Canonical tokens shared across:
     • marketing site (codlab.de)
     • CRM (/crm/, base_crm.html)
     • future apps (terminplaner, praxis, ...)

   Mirrors the values defined inline in codlab-dark.css (~L1611–1645)
   so the CRM (and other Django apps) can import a small file
   instead of the 3885-line site stylesheet.

   Convention:
     --cl-*    site-wide token  (DO NOT edit without sitewide review)
     --crm-*   CRM-only extension (status colors, motion, z-index)

   Update flow: change here → bump CSS cache buster → both surfaces sync.
   ============================================================ */

:root {
  /* ---------- BRAND ---------- */
  --cl-primary:        #ea7a24;          /* logo orange */
  --cl-primary-hover:  #cc6618;
  --cl-primary-active: #a85211;
  --cl-primary-light:  #f4842c;
  --cl-primary-soft:   rgba(234, 122, 36, 0.14);
  --cl-primary-glow:   rgba(234, 122, 36, 0.35);

  /* Aqua secondary (rare — used as warm/cool counterpoint on the site) */
  --cl-accent-aqua:    #54a8c7;
  --cl-accent-aqua-d:  #468faa;

  /* ---------- SURFACES ---------- */
  --cl-surface-0:      #ffffff;          /* primary card / panel bg */
  --cl-surface-1:      #f6f7f9;          /* page bg / subtle fill */
  --cl-surface-2:      #e9edf2;          /* dividers / muted fills */
  --cl-surface-3:      #dde2e9;          /* hover state on muted fills */

  --cl-surface-dark-0: #262b32;          /* dark hero island bg */
  --cl-surface-dark-1: #343f52;          /* slightly elevated dark */
  --cl-surface-dark-2: #1a1f2e;          /* deepest section bg */

  /* ---------- TEXT ---------- */
  --cl-text:                 #343f52;    /* on light */
  --cl-text-on-light:        #343f52;    /* alias */
  --cl-text-muted:           #6b7280;
  /* WCAG AA constraint: subtle text must stay ≥4.5:1 on --cl-surface-0 (#fff).
     #69737f = 4.82:1 on white (old #9099a8 was 2.87:1 — do not lighten). */
  --cl-text-subtle:          #69737f;

  --cl-text-on-dark:         #ffffff;
  --cl-text-muted-on-dark:   rgba(255, 255, 255, 0.78);
  --cl-text-subtle-on-dark:  rgba(255, 255, 255, 0.66);

  --cl-link-on-light:        #a85211;
  --cl-link-on-dark:         #f4842c;

  /* ---------- BORDERS / DIVIDERS ---------- */
  --cl-border:               #e3e7ee;    /* default 1px */
  --cl-border-strong:        #c9d0db;    /* emphasis */
  --cl-border-focus:         var(--cl-primary);
  --cl-divider:              #eef0f4;

  /* ---------- RADIUS ---------- */
  --cl-radius-xs:   0.25rem;             /*  4px — tags, inline */
  --cl-radius-sm:   0.5rem;              /*  8px — small inputs, badges */
  --cl-radius-md:   0.85rem;             /* ~14px — generic cards */
  --cl-radius-lg:   1rem;                /* 16px — feature cards */
  --cl-radius-xl:   1.5rem;              /* 24px — hero cards */
  --cl-radius-pill: 50rem;               /* full pill — primary CTA */

  /* ---------- SHADOWS ---------- */
  --cl-shadow-xs:   0 1px 2px rgba(30, 34, 40, 0.04);
  --cl-shadow-sm:   0 1px 2px rgba(30, 34, 40, 0.06);
  --cl-shadow-md:   0 0.25rem 1.25rem rgba(30, 34, 40, 0.08);
  --cl-shadow-lg:   0 0.5rem 2rem rgba(30, 34, 40, 0.15);
  --cl-shadow-xl:   0 1rem 3rem rgba(30, 34, 40, 0.18);

  --cl-shadow-cta:        0 0.5rem 1.5rem rgba(234, 122, 36, 0.35);
  --cl-shadow-cta-hover:  0 0.5rem 2rem    rgba(234, 122, 36, 0.50);
  --cl-shadow-cta-soft:   0 0.4rem 1.2rem rgba(234, 122, 36, 0.20);
  --cl-shadow-focus-ring: 0 0 0 3px rgba(234, 122, 36, 0.18);

  /* ---------- SPACING SCALE (4-base, 8-step) ---------- */
  --cl-space-1: 0.25rem;   /*  4 */
  --cl-space-2: 0.5rem;    /*  8 */
  --cl-space-3: 0.75rem;   /* 12 */
  --cl-space-4: 1rem;      /* 16 */
  --cl-space-5: 1.5rem;    /* 24 */
  --cl-space-6: 2rem;      /* 32 */
  --cl-space-7: 3rem;      /* 48 */
  --cl-space-8: 4rem;      /* 64 */
  --cl-space-9: 6rem;      /* 96 */

  /* ---------- TYPOGRAPHY ---------- */
  --cl-font-sans: 'THICCCBOI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cl-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --cl-fw-regular:  400;
  --cl-fw-medium:   500;
  --cl-fw-semibold: 600;
  --cl-fw-bold:     700;
  --cl-fw-black:    800;

  --cl-fs-xs:   0.75rem;    /* 12 — micro labels */
  --cl-fs-sm:   0.875rem;   /* 14 — secondary text */
  --cl-fs-base: 0.95rem;    /* 15 — body */
  --cl-fs-md:   1rem;       /* 16 — emphasized body */
  --cl-fs-lg:   1.125rem;   /* 18 — lead */
  --cl-fs-xl:   1.5rem;     /* 24 — h3 */
  --cl-fs-2xl:  2rem;       /* 32 — h2 */
  --cl-fs-3xl:  2.75rem;    /* 44 — h1 / hero */

  --cl-lh-tight:  1.15;     /* hero / display */
  --cl-lh-snug:   1.3;      /* h1-h3 */
  --cl-lh-normal: 1.55;     /* body */
  --cl-lh-relaxed:1.7;      /* prose */

  --cl-tracking-tight:  -0.01em;
  --cl-tracking-normal:  0;
  --cl-tracking-wide:    0.04em;
  --cl-tracking-wider:   0.08em;     /* uppercase labels */

  /* ---------- MOTION ---------- */
  --cl-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --cl-ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --cl-ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --cl-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --cl-duration-instant: 0.1s;
  --cl-duration-fast:    0.18s;
  --cl-duration-base:    0.25s;
  --cl-duration-slow:    0.4s;
  --cl-duration-slower:  0.6s;

  /* ---------- Z-INDEX ---------- */
  --cl-z-base:     0;
  --cl-z-raised:   10;
  --cl-z-sticky:   100;
  --cl-z-overlay:  900;
  --cl-z-modal:    1000;
  --cl-z-popover:  1100;
  --cl-z-toast:    1200;
  --cl-z-tooltip:  1300;

  /* ============================================================
     CRM-ONLY EXTENSIONS
     ============================================================
     Status colors used in lists/badges/cards.
     Calibrated for WCAG AA on white surface.
     ============================================================ */

  /* Status — semantic */
  --crm-status-success:        #15803d;  /* paid, completed */
  --crm-status-success-bg:     #dcfce7;
  --crm-status-success-border: #86efac;

  --crm-status-warning:        #b45309;  /* pending, due-soon */
  --crm-status-warning-bg:     #fef3c7;
  --crm-status-warning-border: #fcd34d;

  --crm-status-danger:         #b91c1c;  /* overdue, lost */
  --crm-status-danger-bg:      #fee2e2;
  --crm-status-danger-border:  #fca5a5;

  --crm-status-info:           #1d4ed8;  /* new, draft */
  --crm-status-info-bg:        #dbeafe;
  --crm-status-info-border:    #93c5fd;

  --crm-status-neutral:        #475569;  /* archived, void */
  --crm-status-neutral-bg:     #f1f5f9;
  --crm-status-neutral-border: #cbd5e1;

  --crm-status-purple:         #6d28d9;  /* premium / special tags */
  --crm-status-purple-bg:      #ede9fe;
  --crm-status-purple-border:  #c4b5fd;

  /* Stat-card hero gradients (orange family — site-aligned) */
  --crm-grad-primary:    linear-gradient(135deg, #ea7a24 0%, #cc6618 100%);
  --crm-grad-primary-soft: linear-gradient(135deg, #f4842c 0%, #ea7a24 100%);
  --crm-grad-dark-island:  linear-gradient(135deg, #1a1f2e 0%, #262b32 50%, #343f52 100%);
  --crm-grad-success:    linear-gradient(135deg, #15803d 0%, #166534 100%);
  --crm-grad-warning:    linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --crm-grad-info:       linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);

  /* Tabular */
  --crm-table-header-bg:        #f6f7f9;
  --crm-table-row-hover:        rgba(234, 122, 36, 0.04);
  --crm-table-row-stripe:       #fafbfc;
  --crm-table-divider:          #eef0f4;

  /* Form inputs */
  --crm-input-bg:               #ffffff;
  --crm-input-bg-disabled:      #f1f5f9;
  --crm-input-border:           #d1d5db;
  --crm-input-border-hover:     #9ca3af;
  --crm-input-shadow-focus:     0 0 0 3px rgba(234, 122, 36, 0.18);
  --crm-input-radius:           var(--cl-radius-md);
  --crm-input-pad-y:            0.65rem;
  --crm-input-pad-x:            1rem;

  /* Sidebar / navbar */
  --crm-nav-h:                  64px;
  --crm-nav-bg:                 var(--cl-surface-dark-0);
  --crm-nav-bg-scrolled:        rgba(38, 43, 50, 0.92);
  --crm-nav-blur:               saturate(180%) blur(14px);
  --crm-nav-link:               rgba(255, 255, 255, 0.78);
  --crm-nav-link-hover:         #ffffff;
  --crm-nav-link-active:        var(--cl-primary-light);

  /* Layout containers */
  --crm-content-max:            1440px;
  --crm-page-pad-x:             clamp(1rem, 2vw, 2rem);
  --crm-page-pad-y:             clamp(1.5rem, 3vw, 2.5rem);
  --crm-card-pad:               1.5rem;
  --crm-card-pad-lg:            2rem;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cl-duration-instant: 0.01s;
    --cl-duration-fast:    0.01s;
    --cl-duration-base:    0.01s;
    --cl-duration-slow:    0.01s;
    --cl-duration-slower:  0.01s;
  }
}