/* ============================================================
   Elinom Design Language (EDL) — Tokens
   Single source of truth for the platform's visual rules.
   Every Elinom module references these CSS variables.
   File: public/elinom-design-system/css/elinom-tokens.css
   ============================================================ */

:root {
  /* ── Background hierarchy ─────────────────────────────── */
  --elinom-bg-deep:        #050816;
  --elinom-bg-dark:        #070b18;
  --elinom-bg:             #0a1024;
  --elinom-surface:        #10182d;
  --elinom-surface-soft:   rgba(255, 255, 255, 0.06);
  --elinom-surface-glass:  rgba(15, 23, 42, 0.55);

  /* ── Borders / dividers ──────────────────────────────── */
  --elinom-border:         rgba(148, 163, 184, 0.16);
  --elinom-border-soft:    rgba(255, 255, 255, 0.08);
  --elinom-border-strong:  rgba(148, 163, 184, 0.32);

  /* ── Brand & primary CTA ─────────────────────────────── */
  --elinom-primary:        #0ea5ff;
  --elinom-primary-glow:   #00d4ff;
  --elinom-primary-deep:   #0369a1;

  /* ── AI / Intelligence accents ───────────────────────── */
  --elinom-ai:             #7c3aed;
  --elinom-ai-glow:        #a855f7;
  --elinom-ai-cyan:        #38bdf8;
  --elinom-ai-pink:        #f472b6;
  --elinom-ai-amber:       #f59e0b;

  /* ── Semantic colours ────────────────────────────────── */
  --elinom-success:        #22c55e;
  --elinom-success-soft:   rgba(34, 197, 94, 0.16);
  --elinom-warning:        #f59e0b;
  --elinom-warning-soft:   rgba(245, 158, 11, 0.16);
  --elinom-danger:         #ef4444;
  --elinom-danger-soft:    rgba(239, 68, 68, 0.16);
  --elinom-info:           #38bdf8;
  --elinom-info-soft:      rgba(56, 189, 248, 0.16);

  /* ── Text hierarchy ──────────────────────────────────── */
  --elinom-text-strong:    #ffffff;
  --elinom-text-main:      #f1f5f9;
  --elinom-text-muted:     #94a3b8;
  --elinom-text-subtle:    #64748b;
  --elinom-text-on-light:  #0f172a;

  /* ── Typography scale ────────────────────────────────── */
  --elinom-font:           'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --elinom-font-mono:      'JetBrains Mono', 'Consolas', monospace;

  --elinom-fs-hero:        3.5rem;   /* 56px – hero H1            */
  --elinom-fs-h1:          2.25rem;  /* 36px – page H1            */
  --elinom-fs-h2:          2rem;     /* 32px – section title      */
  --elinom-fs-h3:          1.5rem;   /* 24px – sub-section        */
  --elinom-fs-kpi:         1.75rem;  /* 28px – KPI value          */
  --elinom-fs-body-lg:     1.06rem;  /* 17px – hero body          */
  --elinom-fs-body:        1rem;     /* 16px – body text          */
  --elinom-fs-sm:          0.875rem; /* 14px – secondary          */
  --elinom-fs-label:       0.82rem;  /* 13px – KPI sub-label      */
  --elinom-fs-caption:     0.75rem;  /* 12px – captions           */
  --elinom-fs-micro:       0.66rem;  /* ~11px – micro-indicators  */

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

  --elinom-lh-tight:       1.2;
  --elinom-lh-snug:        1.35;
  --elinom-lh-normal:      1.5;
  --elinom-lh-relaxed:     1.7;

  --elinom-tracking-tight: -0.01em;
  --elinom-tracking-normal: 0;
  --elinom-tracking-wide:   0.04em;
  --elinom-tracking-wider:  0.085em;

  /* ── Spacing scale (4px base) ────────────────────────── */
  --elinom-space-1:        4px;
  --elinom-space-2:        8px;
  --elinom-space-3:        12px;
  --elinom-space-4:        16px;
  --elinom-space-5:        20px;
  --elinom-space-6:        24px;
  --elinom-space-8:        32px;
  --elinom-space-10:       40px;
  --elinom-space-12:       48px;
  --elinom-space-16:       64px;
  --elinom-space-20:       80px;

  /* ── Radii ───────────────────────────────────────────── */
  --elinom-radius-xs:      4px;
  --elinom-radius-sm:      8px;
  --elinom-radius-md:      14px;
  --elinom-radius-lg:      22px;
  --elinom-radius-xl:      28px;
  --elinom-radius-pill:    999px;

  /* ── Shadows / depth hierarchy ──────────────────────── */
  --elinom-shadow-xs:      0 1px 2px rgba(2, 6, 23, 0.30);
  --elinom-shadow-sm:      0 4px 14px rgba(2, 6, 23, 0.30);
  --elinom-shadow-md:      0 10px 22px rgba(2, 6, 23, 0.42);
  --elinom-shadow-lg:      0 18px 38px rgba(2, 6, 23, 0.40);
  --elinom-shadow-xl:      0 20px 60px rgba(0, 0, 0, 0.35);
  --elinom-shadow-card:    0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 22px rgba(2,6,23,0.42), 0 1px 4px rgba(2,6,23,0.30);
  --elinom-shadow-glow-ai: 0 0 28px rgba(99, 102, 241, 0.18);

  /* ── Motion ──────────────────────────────────────────── */
  --elinom-ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --elinom-ease-emphasis:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --elinom-ease-enter:     cubic-bezier(0, 0, 0.2, 1);
  --elinom-ease-exit:      cubic-bezier(0.4, 0, 1, 1);

  --elinom-dur-instant:    80ms;
  --elinom-dur-fast:       150ms;
  --elinom-dur-base:       250ms;
  --elinom-dur-slow:       400ms;
  --elinom-dur-pulse:      2400ms;
  --elinom-dur-shimmer:    7000ms;

  /* ── Layout & breakpoints ───────────────────────────── */
  --elinom-container:      1280px;
  --elinom-container-wide: 1440px;
  --elinom-bp-sm:          640px;
  --elinom-bp-md:          768px;
  --elinom-bp-lg:          1024px;
  --elinom-bp-xl:          1280px;

  /* ── Z-index hierarchy ──────────────────────────────── */
  --elinom-z-base:         0;
  --elinom-z-raised:       10;
  --elinom-z-dropdown:     1000;
  --elinom-z-sticky:       1100;
  --elinom-z-overlay:      1300;
  --elinom-z-modal:        1400;
  --elinom-z-toast:        1500;
  --elinom-z-tooltip:      1600;
}