/* ============================================================================
   CTS Guardian — Design Tokens (single source of truth)
   Derived from design-system/cts-guardian/MASTER.md (ui-ux-pro-max).
   Brand: trustworthy · secure · European · calm · enterprise — "sleep easy".
   Drop this in once (marketing site + Tabler backoffice + dashboards all import it).
   It exposes BOTH our own --cts-* tokens AND maps them onto Tabler's --tblr-* vars.
   ----------------------------------------------------------------------------
   Type strategy (refined from MASTER): Fira Sans for UI + headings (warm, humanist),
   Fira Code reserved for DATA only — checksums, site tokens, tabular numbers, logs.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');

:root {
  /* ---- Brand / primary (deep blue = trust, security, EU institutional) ---- */
  --cts-primary:            #1E40AF;   /* blue-800 */
  --cts-primary-hover:      #1E3A8A;   /* blue-900 */
  --cts-primary-active:     #172E6E;
  --cts-primary-subtle:     #E9EEF6;   /* tinted surface for primary contexts */
  --cts-on-primary:         #FFFFFF;
  --cts-secondary:          #3B82F6;   /* blue-500 */
  --cts-ink:                #1E3A8A;   /* heading ink */

  /* ---- Accent / CTA (amber = action, "act now" without alarm) ---- */
  --cts-accent:             #D97706;   /* amber-600, WCAG-tuned */
  --cts-accent-hover:       #B45309;
  --cts-on-accent:          #FFFFFF;

  /* ---- Neutrals / surfaces (light) ---- */
  --cts-bg:                 #F8FAFC;   /* page background */
  --cts-surface:            #FFFFFF;   /* cards, panels */
  --cts-surface-2:          #F1F5F9;   /* sunken / table stripe */
  --cts-muted:              #E9EEF6;
  --cts-fg:                 #0F172A;   /* body text — ~16:1 on bg */
  --cts-fg-muted:           #64748B;   /* secondary text — ~4.6:1 */
  --cts-fg-subtle:          #94A3B8;
  --cts-border:             #E2E8F0;   /* general border */
  --cts-border-strong:      #CBD5E1;
  --cts-ring:               #1E40AF;   /* focus ring */

  /* ---- Semantic / status (backup health: ok / running / warn / fail) ---- */
  --cts-success:            #16A34A;
  --cts-success-subtle:     #DCFCE7;
  --cts-running:            #2563EB;
  --cts-running-subtle:     #DBEAFE;
  --cts-warning:            #D97706;
  --cts-warning-subtle:     #FEF3C7;
  --cts-danger:             #DC2626;
  --cts-danger-subtle:      #FEE2E2;
  --cts-info:               #3B82F6;
  --cts-info-subtle:        #E0F2FE;

  /* ---- Typography ---- */
  --cts-font-sans:  'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cts-font-mono:  'Fira Code', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --cts-text-xs:   0.75rem;   /* 12 */
  --cts-text-sm:   0.875rem;  /* 14 */
  --cts-text-base: 1rem;      /* 16 — never smaller for body */
  --cts-text-lg:   1.125rem;  /* 18 */
  --cts-text-xl:   1.5rem;    /* 24 */
  --cts-text-2xl:  2rem;      /* 32 */
  --cts-text-3xl:  2.75rem;   /* 44 — hero */
  --cts-leading-body: 1.6;
  --cts-leading-tight: 1.2;
  --cts-weight-body: 400;
  --cts-weight-medium: 500;
  --cts-weight-semibold: 600;
  --cts-weight-bold: 700;

  /* ---- Spacing (4/8 rhythm) ---- */
  --cts-space-1: 0.25rem;  --cts-space-2: 0.5rem;  --cts-space-3: 0.75rem;
  --cts-space-4: 1rem;     --cts-space-5: 1.5rem;  --cts-space-6: 2rem;
  --cts-space-8: 3rem;     --cts-space-10: 4rem;   --cts-space-12: 6rem;

  /* ---- Radius ---- */
  --cts-radius-sm: 0.375rem; --cts-radius-md: 0.5rem; --cts-radius-lg: 0.75rem;
  --cts-radius-xl: 1rem;     --cts-radius-pill: 9999px;

  /* ---- Elevation (consistent scale, no random shadows) ---- */
  --cts-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --cts-shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --cts-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --cts-shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  --cts-shadow-focus: 0 0 0 3px rgba(30,64,175,.35);

  /* ---- Motion (150–300ms, ease-out enter) ---- */
  --cts-ease: cubic-bezier(.2,.8,.2,1);
  --cts-dur-fast: 150ms; --cts-dur: 220ms; --cts-dur-slow: 320ms;

  /* ---- Layout ---- */
  --cts-container: 1200px;
  --cts-z-nav: 100; --cts-z-dropdown: 200; --cts-z-sticky: 300;
  --cts-z-overlay: 1000; --cts-z-modal: 1100; --cts-z-toast: 1200;
}

/* ===========================  DARK MODE  ================================= */
/* Desaturated tonal variants (not inverted). Test contrast independently. */
:root[data-bs-theme="dark"],
:root.dark,
[data-theme="dark"] {
  --cts-primary:        #3B82F6;
  --cts-primary-hover:  #60A5FA;
  --cts-primary-active: #2563EB;
  --cts-primary-subtle: #16213A;
  --cts-on-primary:     #0B1220;
  --cts-secondary:      #60A5FA;
  --cts-ink:            #DBEAFE;
  --cts-accent:         #F59E0B;
  --cts-accent-hover:   #FBBF24;
  --cts-on-accent:      #0B1220;

  --cts-bg:           #0B1220;
  --cts-surface:      #111A2E;
  --cts-surface-2:    #16213A;
  --cts-muted:        #16213A;
  --cts-fg:           #E2E8F0;
  --cts-fg-muted:     #94A3B8;
  --cts-fg-subtle:    #64748B;
  --cts-border:       #1E293B;
  --cts-border-strong:#334155;
  --cts-ring:         #60A5FA;

  --cts-success-subtle: #0C2A1A;
  --cts-running-subtle: #122036;
  --cts-warning-subtle: #2A2008;
  --cts-danger-subtle:  #2A1212;
  --cts-info-subtle:    #0C2230;

  --cts-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --cts-shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --cts-shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --cts-shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  --cts-shadow-focus: 0 0 0 3px rgba(96,165,250,.4);
}

/* =====================  TABLER BRIDGE (backoffice)  ===================== */
/* Map our tokens onto Tabler's variables so EasyAdmin/Tabler inherits brand. */
:root {
  --tblr-primary: var(--cts-primary);
  --tblr-primary-rgb: 30,64,175;
  --tblr-secondary: var(--cts-secondary);
  --tblr-success: var(--cts-success);
  --tblr-warning: var(--cts-warning);
  --tblr-danger: var(--cts-danger);
  --tblr-info: var(--cts-info);
  --tblr-body-bg: var(--cts-bg);
  --tblr-body-color: var(--cts-fg);
  --tblr-border-color: var(--cts-border);
  --tblr-font-sans-serif: var(--cts-font-sans);
  --tblr-font-monospace: var(--cts-font-mono);
  --tblr-border-radius: var(--cts-radius-md);
  --tblr-link-color: var(--cts-primary);
}

/* =====================  shadcn-style aliases (optional)  ================= */
/* Lets agents that prefer --color-* naming reuse the same palette. */
:root {
  --color-primary: var(--cts-primary);
  --color-on-primary: var(--cts-on-primary);
  --color-secondary: var(--cts-secondary);
  --color-accent: var(--cts-accent);
  --color-background: var(--cts-bg);
  --color-foreground: var(--cts-fg);
  --color-muted: var(--cts-muted);
  --color-border: var(--cts-border);
  --color-destructive: var(--cts-danger);
  --color-ring: var(--cts-ring);
}

/* =====================  Base helpers (opt-in)  ========================== */
.cts-mono, .cts-tabular { font-family: var(--cts-font-mono); font-variant-numeric: tabular-nums; }
.cts-tabular { font-feature-settings: "tnum" 1; }

/* Status pills — used by backoffice + leads monitor + plugin dashboard */
.cts-status { display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .5rem;
  border-radius: var(--cts-radius-pill); font-size: var(--cts-text-xs); font-weight: var(--cts-weight-medium);
  line-height:1.4; }
.cts-status::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background: currentColor; }
.cts-status--ok    { color: var(--cts-success); background: var(--cts-success-subtle); }
.cts-status--run   { color: var(--cts-running); background: var(--cts-running-subtle); }
.cts-status--warn  { color: var(--cts-warning); background: var(--cts-warning-subtle); }
.cts-status--fail  { color: var(--cts-danger);  background: var(--cts-danger-subtle); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}