/* ============================================================
   Helix Design System — Canonical Token Contract  v1
   hectorsserver.com dev surface
   
   Single source of truth for all design tokens.
   All page-specific CSS files should @import this and use
   these variables rather than hard-coding values.
   
   Inspired by HeroUI v3 semantic token structure:
   https://heroui.com/docs/customization/theme
   ============================================================ */

/* ── Primitives (raw scale, not used directly in components) ── */
:root {
  /* Purple scale */
  --hx-purple-50:  #f3f1ff;
  --hx-purple-100: #e7e3ff;
  --hx-purple-200: #d1caff;
  --hx-purple-300: #b8acff;
  --hx-purple-400: #9a88fa;
  --hx-purple-500: #7c6aef;  /* brand primary */
  --hx-purple-600: #6354d4;
  --hx-purple-700: #4d3fb8;
  --hx-purple-800: #382b9b;
  --hx-purple-900: #241880;

  /* Zinc/neutral scale (dark-first) */
  --hx-zinc-950:   #09090b;
  --hx-zinc-900:   #111113;
  --hx-zinc-800:   #18181b;
  --hx-zinc-750:   #1e1e21;
  --hx-zinc-700:   #27272a;
  --hx-zinc-600:   #3f3f46;
  --hx-zinc-500:   #52525b;
  --hx-zinc-400:   #71717a;
  --hx-zinc-300:   #8e8ea0;
  --hx-zinc-200:   #a1a1aa;
  --hx-zinc-100:   #d4d4d8;
  --hx-zinc-50:    #ececf1;

  /* Status scale */
  --hx-green-400:  #34d399;
  --hx-green-500:  #22c55e;
  --hx-red-400:    #f87171;
  --hx-red-500:    #ef4444;
  --hx-yellow-400: #fbbf24;
  --hx-yellow-500: #eab308;
  --hx-blue-400:   #60a5fa;
  --hx-orange-500: #f97316;
}

/* ── Semantic Tokens (role-based, use these everywhere) ── */
:root {
  /* --- Backgrounds --- */
  --color-bg:           var(--hx-zinc-950);   /* page canvas */
  --color-surface:      var(--hx-zinc-900);   /* cards, panels */
  --color-surface-2:    var(--hx-zinc-800);   /* nested surfaces, inputs */
  --color-surface-3:    var(--hx-zinc-750);   /* deepest nesting, hover targets */

  /* --- Borders --- */
  --color-border:       rgba(255, 255, 255, 0.06);
  --color-border-2:     rgba(255, 255, 255, 0.10);
  --color-border-hover: rgba(255, 255, 255, 0.14);

  /* --- Text --- */
  --color-text:         var(--hx-zinc-50);    /* primary content */
  --color-text-muted:   var(--hx-zinc-300);   /* secondary labels */
  --color-text-dim:     var(--hx-zinc-500);   /* placeholders, timestamps */

  /* --- Accent / Brand --- */
  --color-accent:       var(--hx-purple-500);
  --color-accent-hover: var(--hx-purple-400);
  --color-accent-2:     #a78bfa;              /* violet complement */
  --color-accent-bg:    rgba(124, 106, 239, 0.08);
  --color-accent-glow:  rgba(124, 106, 239, 0.15);
  /* RGB split for rgba() composition in components */
  --color-accent-rgb:   124, 106, 239;

  /* --- Semantic status --- */
  --color-success:      var(--hx-green-400);
  --color-success-alt:  var(--hx-green-500);
  --color-error:        var(--hx-red-400);
  --color-error-alt:    var(--hx-red-500);
  --color-warning:      var(--hx-yellow-400);
  --color-warning-alt:  var(--hx-yellow-500);
  --color-info:         var(--hx-blue-400);

  /* --- Glass surfaces --- */
  --glass-bg:           rgba(18, 18, 26, 0.72);
  --glass-border:       rgba(255, 255, 255, 0.06);
  --glass-border-2:     rgba(255, 255, 255, 0.08);

  /* --- Typography --- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', ui-monospace, monospace;

  /* Type scale (1.25 Major Third) */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.8125rem;  /*  13px */
  --text-base:  0.9375rem;  /*  15px */
  --text-md:    1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* --- Spacing scale (4px base) --- */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;  /*  2px */
  --space-1:    0.25rem;   /*  4px */
  --space-1-5:  0.375rem;  /*  6px */
  --space-2:    0.5rem;    /*  8px */
  --space-2-5:  0.625rem;  /* 10px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */

  /* --- Radius --- */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* --- Elevation / Shadows --- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3),  0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.55),0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 4px 18px rgba(var(--color-accent-rgb), 0.22);
  --shadow-accent-hover: 0 6px 28px rgba(var(--color-accent-rgb), 0.38);

  /* Focus ring (accessible keyboard nav) */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(var(--color-accent-rgb), 0.55);

  /* --- Motion --- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);    /* snappy settle */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy enter */
  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);      /* Material standard */
  --ease-decel:   cubic-bezier(0.23, 1, 0.32, 1);    /* fast-in slow-out */

  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-normal:  220ms;
  --duration-slow:    320ms;
  --duration-enter:   380ms;

  --transition-fast:   var(--duration-fast)   var(--ease-out);
  --transition:        var(--duration-normal)  var(--ease-out);
  --transition-slow:   var(--duration-slow)    var(--ease-out);
  --transition-spring: var(--duration-slow)    var(--ease-spring);

  /* --- Layout --- */
  --max-width:        1200px;
  --max-width-wide:   1400px;
  --sidebar-width:    220px;
  --sidebar-width-lg: 280px;

  /* --- Z-index scale --- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-tooltip:  3000;
  --z-top:      9999;
}

/* ── Compat aliases (bridge to existing page-local names) ──────────────────
   Pages that use --bg, --accent, --border etc. will still work because
   these aliases re-route to the canonical tokens above.
   Remove an alias once its page has been migrated to canonical names.
   ─────────────────────────────────────────────────────────────────────── */
:root {
  /* admin.css / freya.css / chat.css aliases */
  --bg:          var(--color-bg);
  --bg-card:     var(--color-surface);
  --bg-hover:    var(--color-surface-2);
  --bg-input:    var(--color-surface);
  --border:      var(--color-border);
  --text:        var(--color-text);
  --text-dim:    var(--color-text-muted);
  --accent:      var(--color-accent);
  --accent-hover:var(--color-accent-hover);
  --green:       var(--color-success-alt);
  --red:         var(--color-error-alt);
  --yellow:      var(--color-warning-alt);
  --radius:      var(--radius-sm);
  --radius-lg:   var(--radius-lg);
  --radius-xl:   var(--radius-xl);

  /* sd.css / cloud.css radius aliases */
  --radius-sm:   var(--radius-sm);   /* already canonical */
  --radius-md:   var(--radius-md);   /* already canonical */
}