/* ===============================
   Psyber.Nexus Design Tokens
   =============================== */

/* Light mode */
:root {
  /* Primary Brand Colors (from logo) */
  --primary-cyan: #2ECAD0;
  --primary-teal: #007A84;
  --primary-navy: #003B4C;

  /* Primary Gradient */
  --primary-gradient: linear-gradient(135deg, #2ECAD0 0%, #007A84 100%);

  /* Extended Scales */
  --cyan-50:#E6FAFB; --cyan-100:#B3F0F2; --cyan-200:#80E6E9; --cyan-300:#4DDCE0; --cyan-400:#2ECAD0;
  --cyan-500:#26A8AD; --cyan-600:#1E868A; --cyan-700:#176468; --cyan-800:#0F4245; --cyan-900:#082023;

  --teal-50:#E0F2F3; --teal-100:#B3DFE1; --teal-200:#66BFC4; --teal-300:#339FA6; --teal-400:#007A84;
  --teal-500:#00656D; --teal-600:#005056; --teal-700:#003B40; --teal-800:#002629; --teal-900:#001113;

  --navy-50:#E6EEF1; --navy-100:#B3CDD4; --navy-200:#80ABB7; --navy-300:#4D8A9A; --navy-400:#1A687D;
  --navy-500:#003B4C; --navy-600:#00303D; --navy-700:#00252E; --navy-800:#001A1F; --navy-900:#000F10;

  /* Accents */
  --accent-purple:#8B5CF6; --accent-purple-light:#A78BFA; --accent-purple-dark:#6D28D9;
  --accent-blue:#3B82F6; --accent-blue-light:#60A5FA; --accent-blue-dark:#1E40AF;
  --accent-green:#10B981; --accent-green-light:#34D399; --accent-green-dark:#047857;

  /* Neutrals */
  --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;

  /* Semantics */
  --success:#10B981; --success-light:#D1FAE5; --success-dark:#065F46;
  --warning:#F59E0B; --warning-light:#FEF3C7; --warning-dark:#92400E;
  --error:#EF4444; --error-light:#FEE2E2; --error-dark:#991B1B;
  --info:#3B82F6; --info-light:#DBEAFE; --info-dark:#1E40AF;

  /* Backgrounds (Light) */
  --bg-primary:#FFFFFF;    /* cards, header, surfaces */
  --bg-secondary:#F9FAFB;  /* page base */
  --bg-tertiary:#F3F4F6;   /* section stripes */

  /* Text (Light) */
  --text-primary:#111827;
  --text-secondary:#4B5563;
  --text-muted:#9CA3AF;
  --text-inverse:#FFFFFF;
  --text-link:#007A84;
  --text-link-hover:#2ECAD0;

  /* Borders (Light) */
  --border-default:#E5E7EB;  /* gray-200 */
  --border-light:#F3F4F6;    /* gray-100 */
  --border-focus:#007A84;    /* teal */

  /* Shadows/Effects */
  --glow-cyan: 0 0 20px rgba(46, 202, 208, 0.5);
  --glow-teal: 0 0 20px rgba(0, 122, 132, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 59, 76, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 59, 76, 0.10);
  --shadow-lg: 0 10px 15px rgba(0, 59, 76, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 59, 76, 0.20);

  /* Motion */
  --transition-base: all .3s cubic-bezier(.4,0,.2,1);

  /* Back-compat aliases so existing CSS keeps working */
  --brand-primary: var(--primary-cyan);
  --brand-secondary: var(--primary-teal);
  --brand-accent: var(--accent-purple);
  --brand-gradient: var(--primary-gradient);
  --color-error: var(--error);

  /* Fluid type */
  --font-size-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --font-size-sm:clamp(.875rem,.85rem + .125vw,1rem);
  --font-size-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --font-size-lg:clamp(1.125rem,1.05rem + .375vw,1.25rem);
  --font-size-xl:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --font-size-2xl:clamp(1.5rem,1.35rem + .75vw,2rem);
  --font-size-3xl:clamp(1.875rem,1.65rem + 1.125vw,2.5rem);
  --font-size-4xl:clamp(2.25rem,1.95rem + 1.5vw,3rem);
}

/* Dark mode */
[data-theme="dark"] {
  /* Backgrounds (Dark) */
  --bg-primary:#0F1419;     /* cards, header */
  --bg-secondary:#0A0F14;   /* page base */
  --bg-tertiary:#141A20;    /* section stripes */

  /* Text (Dark) */
  --text-primary:#F9FAFB;
  --text-secondary:#D1D5DB;
  --text-muted:#9CA3AF;
  --text-inverse:#0A0F14;
  --text-link:#2ECAD0;
  --text-link-hover:#80E6E9;

  /* Borders (Dark) */
  --border-default:#1F2A33; /* custom dark border */
  --border-light:#172028;
  --border-focus:#2ECAD0;   /* cyan */

  /* Shadows/Effects */
  --shadow-sm: 0 1px 2px rgba(0, 59, 76, 0.25);
  --shadow-md: 0 4px 6px rgba(0, 59, 76, 0.35);
  --shadow-lg: 0 10px 15px rgba(0, 59, 76, 0.45);
  --shadow-xl: 0 20px 25px rgba(0, 59, 76, 0.55);

  /* Alias overrides if needed */
  --brand-primary: var(--primary-cyan);
  --brand-secondary: var(--primary-teal);
  --brand-accent: var(--accent-purple);
  --brand-gradient: var(--primary-gradient);
  --color-error: var(--error);
}