/* NUDO — design tokens (SHARED)
   Single source of truth for colors, type scale, spacing, motion, radius.
   This file is byte-identical in frontend-landing/styles/ and frontend-admin/styles/.
   Edit one, copy to the other, then run scripts/check-shared.sh.

   Themes: dark is the brand default. Light is opt-in via <html data-theme="light">
   (set by js/theme.js from the user's choice). Every color below has a value in
   both themes; components consume roles, never raw hex. */

:root {
  color-scheme: dark;

  /* ── brand (theme-invariant) ───────────────────────────────── */
  --c-purple-deep:   #3D0B92;
  --c-purple-core:   #7A07D9;
  --c-purple-bright: #8B47FF;

  --grad-purple: linear-gradient(90deg, var(--c-purple-deep) 0%, var(--c-purple-core) 50%, var(--c-purple-bright) 100%);
  --grad-purple-diag: linear-gradient(135deg, var(--c-purple-deep) 0%, var(--c-purple-core) 50%, var(--c-purple-bright) 100%);

  /* ── surfaces ──────────────────────────────────────────────── */
  --c-bg:         #0a0a0a;   /* page */
  --c-surface:    #141414;   /* panels, elevated blocks */
  --c-surface-2:  #161616;   /* cards inside panels */
  --c-surface-3:  #1c1c1c;   /* hover / active rows */
  --c-line:       #1f1f1f;
  --c-line-soft:  #2a2a2a;
  --c-line-strong:#3a3a3a;

  /* ── text ──────────────────────────────────────────────────── */
  --c-text:        #ffffff;
  --c-text-dim:    #b4b4b4;  /* secondary — 8.9:1 on surface */
  --c-text-mute:   #8b8b8b;  /* tertiary — 5.4:1 on surface (AA) */
  --c-text-inverse:#0a0a0a;
  --c-brand-text:  #a373ff;  /* purple as small text — 5.7:1 on surface */
  --c-focus:       #8B47FF;

  /* ── status (icon + label always accompany the color) ──────── */
  --c-ok:       #86e6a0;
  --c-ok-bg:    rgba(134, 230, 160, 0.10);
  --c-warn:     #ffb84c;
  --c-warn-bg:  rgba(255, 184, 76, 0.10);
  --c-err:      #ff8585;
  --c-err-bg:   rgba(255, 133, 133, 0.10);
  --c-info:     #a373ff;
  --c-info-bg:  rgba(139, 71, 255, 0.12);

  /* ── data-viz series (validated with the dataviz palette checker) */
  --viz-app:     #8B47FF;    /* categorical slot 1: App */
  --viz-web:     #1A9C8F;    /* categorical slot 2: Web */
  --viz-other:   #8a8a8a;    /* de-emphasis / "Cuenta" */
  --viz-grid:    #262626;
  --viz-axis:    #3a3a3a;
  --viz-surface: var(--c-surface-2);

  /* ── effects ───────────────────────────────────────────────── */
  --halo-purple:      0 0 80px -10px rgba(122, 7, 217, 0.55);
  --halo-purple-soft: 0 0 120px -20px rgba(139, 71, 255, 0.35);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 40px -16px rgba(0, 0, 0, 0.6);
  --glass-bg: rgba(20, 20, 20, 0.6);
  --nav-bg:   rgba(10, 10, 10, 0.8);
  --glow-1:   rgba(122, 7, 217, 0.35);
  --glow-2:   rgba(139, 71, 255, 0.22);
  --grid-ink: rgba(255, 255, 255, 0.03);
  --logo-filter: invert(1);   /* source logo is black-on-transparent */

  /* ── legacy aliases (older stylesheets still reference these) ── */
  --c-ink:        var(--c-bg);
  --c-ink-soft:   var(--c-surface);
  --c-ink-card:   var(--c-surface-2);
  --c-paper:      var(--c-text);
  --c-paper-dim:  var(--c-text-dim);
  --c-paper-mute: var(--c-text-mute);

  /* ── typography ─────────────────────────────────────────────── */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-mega:   clamp(2.75rem, 8vw + 1rem, 7.5rem);
  --fs-h1:     clamp(2rem,   5vw + 0.5rem, 4.5rem);
  --fs-h2:     clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
  --fs-h3:     clamp(1.125rem, 1vw + 0.75rem, 1.5rem);
  --fs-body:   clamp(1rem, 0.4vw + 0.875rem, 1.125rem);
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.015em;
  --tracking-wide:  0.08em;
  --tracking-mega:  0.18em;

  /* ── spacing ───────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  --container:    1240px;
  --container-sm: 720px;
  --gutter:       clamp(16px, 4vw, 48px);

  /* ── motion ────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   180ms;
  --d-medium: 320ms;
  --d-slow:   600ms;

  /* ── radius ────────────────────────────────────────────────── */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* ── z-index ───────────────────────────────────────────────── */
  --z-bg:    -1;
  --z-base:   0;
  --z-raised: 10;
  --z-nav:    50;
  --z-top:    100;
}

/* ── light theme ─────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --c-bg:         #f7f6fb;
  --c-surface:    #ffffff;
  --c-surface-2:  #ffffff;
  --c-surface-3:  #f1eff8;
  --c-line:       #e6e3f0;
  --c-line-soft:  #d6d2e4;
  --c-line-strong:#b9b3d0;

  --c-text:        #0f0d17;
  --c-text-dim:    #4b475c;  /* 8.9:1 on white */
  --c-text-mute:   #67637a;  /* 5.4:1 on bg (AA) */
  --c-text-inverse:#ffffff;
  --c-brand-text:  #6b21c9;  /* 7.8:1 on white */
  --c-focus:       #7A07D9;

  --c-ok:       #1a7f3c;
  --c-ok-bg:    rgba(26, 127, 60, 0.10);
  --c-warn:     #8a5200;
  --c-warn-bg:  rgba(154, 91, 0, 0.12);
  --c-err:      #b42323;
  --c-err-bg:   rgba(180, 35, 35, 0.08);
  --c-info:     #6b21c9;
  --c-info-bg:  rgba(122, 7, 217, 0.08);

  --viz-app:     #7A07D9;
  --viz-web:     #0F9C8A;
  --viz-other:   #8f8ba0;
  --viz-grid:    #ebe9f2;
  --viz-axis:    #cfcbdd;

  --halo-purple:      0 0 60px -10px rgba(122, 7, 217, 0.35);
  --halo-purple-soft: 0 0 90px -20px rgba(139, 71, 255, 0.25);
  --shadow-1: 0 1px 2px rgba(20, 10, 40, 0.06);
  --shadow-2: 0 16px 40px -18px rgba(40, 10, 90, 0.25);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --nav-bg:   rgba(247, 246, 251, 0.82);
  --glow-1:   rgba(122, 7, 217, 0.16);
  --glow-2:   rgba(139, 71, 255, 0.12);
  --grid-ink: rgba(20, 10, 60, 0.05);
  --logo-filter: none;
}

/* ── reduced motion: collapse durations globally ─────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast:   1ms;
    --d-medium: 1ms;
    --d-slow:   1ms;
  }
}