/*
 * prox-tokens.css — canonical design tokens for Prox.io
 *
 * One source of truth for color, typography, spacing, radii, shadows,
 * motion, and z-index. Loaded by every surface (index, transfer, share,
 * monitor) so the whole app shares one visual system.
 *
 * Canonical names use --prox-* prefix. Legacy names from the old
 * index.html and prox-base.css :root blocks are preserved as aliases
 * so existing CSS keeps working unchanged during the migration.
 */

:root {
  /* ── Surfaces (layered, dark theme) ───────────────────────────── */
  --prox-bg:           #000000;       /* page background, deepest */
  --prox-surface-1:    #111111;       /* cards on the page */
  --prox-surface-2:    #1a1a1a;       /* elevated chrome */
  --prox-surface-3:    #222222;       /* hover, modal backdrop */
  --prox-surface-4:    #2a2a2a;       /* tooltips, highest elevation */

  /* ── Text ─────────────────────────────────────────────────────── */
  --prox-text-primary:    #f5f5f5;    /* headings, primary text */
  --prox-text-secondary:  rgba(255, 255, 255, 0.72);
  --prox-text-tertiary:   rgba(255, 255, 255, 0.55);   /* muted */
  --prox-text-quaternary: rgba(255, 255, 255, 0.38);   /* dim */
  --prox-text-on-accent:  #ffffff;

  /* ── Borders ──────────────────────────────────────────────────── */
  --prox-border:        rgba(255, 255, 255, 0.10);
  --prox-border-strong: rgba(255, 255, 255, 0.18);
  --prox-border-focus:  var(--prox-accent);

  /* ── Brand (pink → purple → cyan) ─────────────────────────────── */
  --prox-accent:        #a855f7;      /* primary brand */
  --prox-accent-hover:  #c084fc;
  --prox-accent-soft:   rgba(168, 85, 247, 0.15);
  --prox-pink:          #e84393;
  --prox-cyan:          #06b6d4;
  --prox-gradient:      linear-gradient(135deg, #e84393, #a855f7, #06b6d4);

  /* ── Semantic feedback ────────────────────────────────────────── */
  --prox-success:       #10b981;
  --prox-success-soft:  rgba(16, 185, 129, 0.15);
  --prox-warning:       #f59e0b;
  --prox-warning-soft:  rgba(245, 158, 11, 0.15);
  --prox-danger:        #ef4444;
  --prox-danger-soft:   rgba(239, 68, 68, 0.15);
  --prox-info:          #06b6d4;
  --prox-info-soft:     rgba(6, 182, 212, 0.15);

  /* ── Typography ───────────────────────────────────────────────── */
  --prox-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --prox-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px). Use these instead of magic rem values. */
  --prox-text-micro: 11px;            /* tiny labels, status dots */
  --prox-text-xs:    12px;            /* metadata, captions */
  --prox-text-sm:    13px;            /* secondary UI text */
  --prox-text-base:  14px;            /* default body */
  --prox-text-md:    15px;            /* form inputs, primary body */
  --prox-text-lg:    17px;            /* card titles */
  --prox-text-xl:    20px;            /* section headings */
  --prox-text-2xl:   24px;            /* page subtitles */
  --prox-text-3xl:   28px;            /* page headlines */
  --prox-text-4xl:   34px;            /* hero headlines */

  --prox-weight-regular:  400;
  --prox-weight-medium:   500;
  --prox-weight-semibold: 600;
  --prox-weight-bold:     700;

  --prox-leading-tight:  1.25;
  --prox-leading-snug:   1.35;
  --prox-leading-normal: 1.5;
  --prox-leading-loose:  1.65;

  --prox-tracking-tight:  -0.02em;
  --prox-tracking-normal: 0;
  --prox-tracking-wide:   0.02em;
  --prox-tracking-caps:   0.08em;

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

  /* ── Radii ────────────────────────────────────────────────────── */
  --prox-radius-xs:  4px;
  --prox-radius-sm:  6px;
  --prox-radius-md:  8px;
  --prox-radius-lg: 12px;
  --prox-radius-xl: 16px;
  --prox-radius-2xl: 20px;
  --prox-radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --prox-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
  --prox-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45);
  --prox-shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.50);
  --prox-shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.65);
  --prox-shadow-glow:  0 0 0 3px rgba(168, 85, 247, 0.25);
  --prox-shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.40), 0 0 24px rgba(168, 85, 247, 0.15);

  /* ── Motion ───────────────────────────────────────────────────── */
  --prox-duration-instant: 80ms;
  --prox-duration-fast:    150ms;
  --prox-duration-base:    250ms;
  --prox-duration-slow:    350ms;
  --prox-duration-slower:  500ms;

  --prox-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --prox-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --prox-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --prox-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale (replaces 1000 / 9500 / 9999 / 99999 chaos) ── */
  --prox-z-base:        1;
  --prox-z-sticky:      100;
  --prox-z-dropdown:    200;
  --prox-z-overlay:     1000;
  --prox-z-modal:       2000;
  --prox-z-toast:       3000;
  --prox-z-tooltip:     4000;
  --prox-z-popover:     5000;

  /* ── Legacy aliases (keep existing CSS working unchanged) ─────── */
  /* From the old index.html :root block */
  --bg:            var(--prox-bg);
  --surface:       var(--prox-surface-2);
  --surface-hover: var(--prox-surface-3);
  --border:        var(--prox-border);
  --text:          var(--prox-text-primary);
  --text-muted:    var(--prox-text-tertiary);
  --accent:        var(--prox-accent);
  --accent-hover:  var(--prox-accent-hover);
  --accent-fg:     var(--prox-text-on-accent);
  --accent-pink:   var(--prox-pink);
  --accent-cyan:   var(--prox-cyan);
  --gradient:      var(--prox-gradient);
  --green:         var(--prox-success);
  --yellow:        var(--prox-warning);
  --red:           var(--prox-danger);
  --radius:        var(--prox-radius-lg);
  --radius-sm:     var(--prox-radius-md);
  --spacing-xs:    var(--prox-space-1);
  --spacing-sm:    var(--prox-space-2);
  --spacing-md:    var(--prox-space-3);
  --spacing-lg:    var(--prox-space-4);
  --spacing-xl:    var(--prox-space-6);
  --spacing-2xl:   var(--prox-space-8);

  /* From the old prox-base.css :root block */
  --font-sans:         var(--prox-font-sans);
  --color-bg:          var(--prox-bg);
  --color-surface:     var(--prox-surface-1);
  --color-surface-2:   var(--prox-surface-2);
  --color-surface-3:   var(--prox-surface-3);
  --color-border:      var(--prox-border);
  --color-border-2:    var(--prox-border-strong);
  --color-border-3:    rgba(255, 255, 255, 0.25);
  --color-text:        var(--prox-text-primary);
  --color-text-muted:  var(--prox-text-tertiary);
  --color-text-dim:    var(--prox-text-quaternary);
  --color-text-faint:  rgba(255, 255, 255, 0.30);
  --color-accent:        var(--prox-accent);
  --color-accent-hover:  var(--prox-accent-hover);
  --color-pink:          var(--prox-pink);
  --color-cyan:          var(--prox-cyan);
  --gradient-brand:      var(--prox-gradient);
  --color-success:  var(--prox-success);
  --color-warning:  var(--prox-warning);
  --color-error:    var(--prox-danger);
  --color-info:     var(--prox-info);
  --transition-fast: var(--prox-duration-fast) var(--prox-ease-out);

  /* From monitor.html :root */
  --muted:    var(--prox-text-tertiary);
  --purple:   var(--prox-accent);
  --purple-d: #7c3aed;
  --amber:    var(--prox-warning);
}

/* ── Reduced-motion respect ──────────────────────────────────────
   Users who set prefers-reduced-motion get instant transitions
   instead of the playful springs and fades. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --prox-duration-instant: 0ms;
    --prox-duration-fast:    0ms;
    --prox-duration-base:    0ms;
    --prox-duration-slow:    0ms;
    --prox-duration-slower:  0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}