/* ═══════════════════════════════════════════════════════════════════
   THE TOKENS — single source of truth across the WebMobi ecosystem
   ═══════════════════════════════════════════════════════════════════
   Surfaces this file governs:
     · webmobi.com           (B2C marketing + discovery dashboard)
     · events.webmobi.com    (B2B organizer SaaS)
     · NexaLink              (identity + networking layer)
     · NexaLink Scanner      (utility — speed-first)
     · Personal CRM          (relationship layer)
     · iOS / Android         (mobile apps — share metrics)

   Do not add tokens here without removing or merging an existing one.
   New surfaces inherit; they do not extend.

   Last updated: 2026-05-01
   ─────────────────────────────────────────────────────────────────── */

:root {

  /* ─── Color: brand ───────────────────────────────────────────────
     One primary. One accent. One gradient. That's the entire brand
     palette. There is no purple, no orange, no pink, no lime, no
     yellow. Color is signal — not decoration.
     ─────────────────────────────────────────────────────────────── */

  --primary:           #0047A1;       /* NexaLink Blue — the brand */
  --primary-hover:     #003580;
  --primary-active:    #002B66;
  --primary-soft:      #E8F0FE;       /* surface tint, hover bg */
  --primary-faint:     #F5F8FE;       /* used sparingly */
  --primary-rgb:       0, 71, 161;

  --accent:            #00AEE8;       /* Cyan — the brand pair */
  --accent-hover:      #0095C7;
  --accent-soft:       #E0F7FF;
  --accent-rgb:        0, 174, 232;

  --brand-gradient:    linear-gradient(135deg, #0047A1 0%, #00AEE8 100%);
  --brand-gradient-h:  linear-gradient(90deg,  #0047A1 0%, #00AEE8 100%);
  --brand-gradient-dark: linear-gradient(135deg, #0A0E27 0%, #0047A1 100%);

  /* ─── Color: semantic — meaning, never decoration ────────────────
     Use only when the meaning is exact:
       success → completed, paid, confirmed
       warning → not-yet-built, partial, attention
       danger  → destructive, failed, blocked
       info    → neutral context (rare — most info is just text)
     ─────────────────────────────────────────────────────────────── */

  --success:           #10B981;
  --success-soft:      #D1FAE5;
  --success-ink:       #065F46;

  --warning:           #F59E0B;
  --warning-soft:      #FEF3C7;
  --warning-ink:       #92400E;

  --danger:            #EF4444;
  --danger-soft:       #FEE2E2;
  --danger-ink:        #991B1B;

  --info:              #0EA5E9;       /* a tone darker than accent */
  --info-soft:         #E0F2FE;
  --info-ink:          #075985;

  /* ─── Color: surface and ink ────────────────────────────────────
     The grays are the canvas. Cool, slightly blue, anchored to the
     primary. Photos, faces, and content carry color — chrome stays
     neutral.
     ─────────────────────────────────────────────────────────────── */

  --gray-50:           #F9FAFB;
  --gray-100:          #F3F4F6;
  --gray-200:          #E5E7EB;
  --gray-300:          #D1D5DB;
  --gray-400:          #9CA3AF;
  --gray-500:          #6B7280;
  --gray-600:          #4B5563;
  --gray-700:          #374151;
  --gray-800:          #1F2937;
  --gray-900:          #111827;

  --bg-canvas:         #FFFFFF;       /* page background */
  --bg-surface:        #F9FAFB;       /* sidebar, page bg on B2B */
  --bg-elevated:       #FFFFFF;       /* card, modal */
  --bg-subtle:         #F3F4F6;       /* nested surface, hover */
  --bg-overlay:        rgba(17, 24, 39, 0.55);

  --line-soft:         #F3F4F6;       /* divider */
  --line:              #E5E7EB;       /* default border */
  --line-strong:       #D1D5DB;       /* hover, focused border */

  --ink-primary:       #111827;       /* headings, primary action */
  --ink-secondary:     #374151;       /* body */
  --ink-tertiary:      #6B7280;       /* meta, captions */
  --ink-quaternary:    #9CA3AF;       /* disabled, placeholder */
  --ink-on-brand:      #FFFFFF;

  /* ─── Type — Inter is the family. SF Pro on Apple via fallback. ─
     Apple platforms get SF Pro automatically through -apple-system.
     Inter's metrics are close enough that hierarchy holds.
     ─────────────────────────────────────────────────────────────── */

  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-display:      'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --font-mono:         'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale — geometric, ~1.18 ratio at the small end, opens up at hero */
  --type-11:           11px;
  --type-12:           12px;
  --type-13:           13px;
  --type-14:           14px;     /* default body on B2B */
  --type-15:           15px;     /* default body on web */
  --type-17:           17px;     /* B2C body, profile bio */
  --type-22:           22px;     /* card title */
  --type-28:           28px;     /* section title */
  --type-34:           34px;     /* page title (B2B), bridge title */
  --type-44:           44px;     /* hero (B2B marketing) */
  --type-56:           56px;     /* B2C hero, profile name */
  --type-72:           72px;     /* B2C greeting / NexaLink hero — used sparingly */

  /* Two weights per screen, max. Reach for size before weight. */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;     /* display only */

  /* Tracking tightens with size — Apple's typographic move */
  --tracking-tight:    -0.005em;
  --tracking-tighter:  -0.015em;
  --tracking-display:  -0.025em;
  --tracking-hero:     -0.035em;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.08em;

  --leading-tight:     1.15;
  --leading-snug:      1.35;
  --leading-normal:    1.55;     /* body */
  --leading-loose:     1.7;

  /* ─── Spacing — strict 4px grid, geometric expansion ────────────
     Spacing tokens are a closed set. Don't ship a 13px gap.
     ─────────────────────────────────────────────────────────────── */

  --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;
  --space-20:          80px;
  --space-24:          96px;
  --space-32:          128px;     /* hero breathers, marketing only */

  /* ─── Radius — six steps. Match the surface scale. ──────────────
     Never use 5px / 7px / 9px. Pick from the list.
     ─────────────────────────────────────────────────────────────── */

  --radius-xs:         6px;       /* tag, chip */
  --radius-sm:         10px;      /* input, small button */
  --radius-md:         14px;      /* card, modal default */
  --radius-lg:         20px;      /* large card, surface tile */
  --radius-xl:         28px;      /* hero card, mobile-bridge */
  --radius-pill:       9999px;    /* pill button, avatar pill */

  /* ─── Elevation — minimal. Most surfaces have none. ─────────────
     Shadows imply that an object is liftable. If it isn't, it
     doesn't get one. Use border + bg first.
     ─────────────────────────────────────────────────────────────── */

  --shadow-xs:         0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-sm:         0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md:         0 4px 12px rgba(17, 24, 39, 0.08), 0 0 0 0.5px rgba(17, 24, 39, 0.04);
  --shadow-lg:         0 12px 32px rgba(17, 24, 39, 0.10), 0 0 0 0.5px rgba(17, 24, 39, 0.05);
  --shadow-xl:         0 24px 60px rgba(17, 24, 39, 0.14), 0 0 0 0.5px rgba(17, 24, 39, 0.06);
  --shadow-bridge:     0 32px 80px rgba(0, 71, 161, 0.20), 0 0 0 0.5px rgba(17, 24, 39, 0.08);
  --shadow-focus:      0 0 0 3px rgba(0, 71, 161, 0.18);
  --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.18);

  /* ─── Motion — three timings. Three curves. That's it. ─────────
     Quick: instant feedback, hover, toggle.
     Default: state change, drawer, list update.
     Cinematic: hero, modal, mobile-bridge entrance — used sparingly.
     ─────────────────────────────────────────────────────────────── */

  --duration-instant:  60ms;        /* scanner, key feedback */
  --duration-quick:    150ms;       /* hover, toggle, focus */
  --duration-base:     220ms;       /* state change, drawer */
  --duration-slow:     320ms;       /* page transition, list reflow */
  --duration-cinematic: 720ms;      /* hero entrance, mobile-bridge */

  --ease-default:      cubic-bezier(0.2, 0.8, 0.2, 1);    /* ease-out, brisk */
  --ease-emphasized:   cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like */
  --ease-emotional:    cubic-bezier(0.16, 1, 0.3, 1);     /* ease-out-quint */

  /* ─── Layout — containers, gutters, breakpoints ─────────────────
     Three container widths. No more.
     ─────────────────────────────────────────────────────────────── */

  --container-narrow:  720px;     /* profile, single-column reading */
  --container:         1024px;    /* B2B dashboard, app */
  --container-wide:    1280px;    /* B2C discovery, marketing */
  --container-marketing: 1200px;  /* legacy NexaLink marketing — retained */

  --header-height:     64px;
  --sidebar-width:     260px;     /* B2B and CRM */
  --sidebar-collapsed: 64px;

  /* ─── Z-index — explicit, not magic numbers ─────────────────────── */

  --z-base:            1;
  --z-sticky:          20;
  --z-dropdown:        30;
  --z-overlay:         40;
  --z-modal:           50;
  --z-toast:           60;
  --z-tooltip:         70;

  /* ─── Avatar / face backstops — for failed image loads ──────────
     Kept neutral, low saturation. Faces should be photos. These are
     just so an empty state doesn't go black.
     ─────────────────────────────────────────────────────────────── */

  --face-1:            #DEE7F0;
  --face-2:            #E8E0F0;
  --face-3:            #F0E5DC;
  --face-4:            #DCE8E0;
  --face-5:            #E8DCDC;

  /* ─── Surface adaptation flags ──────────────────────────────────
     Each surface SHOULD set --surface-density so components scale.
     Defaults to "comfortable" — B2B sets "compact", scanner sets
     "minimal", B2C sets "spacious".
     ─────────────────────────────────────────────────────────────── */

  --surface-density:   comfortable;     /* compact | comfortable | spacious | minimal */
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — designed, not inverted
   ═══════════════════════════════════════════════════════════════════
   Hierarchy and meaning must hold. Dark mode is its own design pass:
   surfaces lift slightly, ink desaturates, accent gets a touch
   warmer to compensate for the dark backdrop.
   ─────────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg-canvas:         #0A0E1A;
  --bg-surface:        #0F1420;
  --bg-elevated:       #161B2B;
  --bg-subtle:         #1B2237;
  --bg-overlay:        rgba(0, 0, 0, 0.65);

  --line-soft:         rgba(255, 255, 255, 0.06);
  --line:              rgba(255, 255, 255, 0.10);
  --line-strong:       rgba(255, 255, 255, 0.18);

  --ink-primary:       #F3F4F6;
  --ink-secondary:     #D1D5DB;
  --ink-tertiary:      #9CA3AF;
  --ink-quaternary:    #6B7280;

  --primary:           #4B8FE0;       /* lifted for dark backdrop */
  --primary-hover:     #6BA4E8;
  --primary-soft:      rgba(75, 143, 224, 0.18);
  --primary-faint:     rgba(75, 143, 224, 0.08);

  --accent:            #5DD3F4;
  --accent-hover:      #7CDCF6;
  --accent-soft:       rgba(93, 211, 244, 0.18);

  --shadow-xs:         0 0 0 0.5px rgba(255, 255, 255, 0.05);
  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.40), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --shadow-lg:         0 24px 60px rgba(0, 0, 0, 0.60), 0 0 0 0.5px rgba(255, 255, 255, 0.10);

  --shadow-focus:      0 0 0 3px rgba(75, 143, 224, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    /* Inherit the same overrides. Duplicated rather than nested so a
       host page with no JS still gets dark mode automatically. */
    --bg-canvas:       #0A0E1A;
    --bg-surface:      #0F1420;
    --bg-elevated:     #161B2B;
    --bg-subtle:       #1B2237;
    --line-soft:       rgba(255, 255, 255, 0.06);
    --line:            rgba(255, 255, 255, 0.10);
    --line-strong:     rgba(255, 255, 255, 0.18);
    --ink-primary:     #F3F4F6;
    --ink-secondary:   #D1D5DB;
    --ink-tertiary:    #9CA3AF;
    --ink-quaternary:  #6B7280;
    --primary:         #4B8FE0;
    --primary-soft:    rgba(75, 143, 224, 0.18);
    --accent:          #5DD3F4;
    --accent-soft:     rgba(93, 211, 244, 0.18);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SURFACE DENSITY — the same components, different rhythm
   ═══════════════════════════════════════════════════════════════════ */

[data-density="compact"] {        /* B2B dashboard, CRM */
  --row-height:        36px;
  --button-height:     36px;
  --input-height:      36px;
  --card-padding:      var(--space-4);
  --section-gap:       var(--space-6);
  --type-body:         var(--type-14);
}

[data-density="comfortable"] {    /* default — NexaLink, marketing */
  --row-height:        44px;
  --button-height:     44px;
  --input-height:      44px;
  --card-padding:      var(--space-6);
  --section-gap:       var(--space-10);
  --type-body:         var(--type-15);
}

[data-density="spacious"] {       /* B2C discovery, B2C dashboard */
  --row-height:        56px;
  --button-height:     48px;
  --input-height:      48px;
  --card-padding:      var(--space-8);
  --section-gap:       var(--space-16);
  --type-body:         var(--type-17);
}

[data-density="minimal"] {        /* Scanner — speed-first, almost no chrome */
  --row-height:        56px;
  --button-height:     56px;
  --input-height:      48px;
  --card-padding:      var(--space-4);
  --section-gap:       var(--space-4);
  --type-body:         var(--type-15);
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — collapse all timings
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant:  0.01ms;
    --duration-quick:    0.01ms;
    --duration-base:     0.01ms;
    --duration-slow:     0.01ms;
    --duration-cinematic: 0.01ms;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}