/* ============================================================
   RJ45 Networking & Security — Design Tokens
   Brand: Navy / Yellow / Mint
   Dual theme: light (default) + dark
   ============================================================ */

:root {
  /* -------- Brand palette (shared across themes) -------- */
  --brand-navy: #0a1f44;
  --brand-navy-deep: #061632;
  --brand-navy-soft: #13305c;
  --brand-yellow: #f5c542;
  --brand-yellow-soft: #ffd86a;
  --brand-mint: #2dd4a8;
  --brand-mint-deep: #1fb48c;
  --brand-white: #ffffff;
  --brand-ink: #0a1226;

  /* -------- Neutrals -------- */
  --gray-50:  #f7f8fa;
  --gray-100: #eef1f6;
  --gray-200: #dde2ec;
  --gray-300: #c4cbd9;
  --gray-400: #97a0b3;
  --gray-500: #6b7487;
  --gray-600: #4b546a;
  --gray-700: #333c52;
  --gray-800: #1f2738;
  --gray-900: #111827;

  /* -------- Semantic tokens (LIGHT mode — default) -------- */
  --bg:           #ffffff;
  --bg-soft:      #f7f8fa;
  --bg-elevated:  #ffffff;
  --bg-inverse:   var(--brand-navy);
  --bg-accent:    #fef8e3;          /* soft yellow wash */
  --bg-mint:      #e8faf2;          /* soft mint wash */

  --surface:      #ffffff;
  --surface-2:    #f2f4f8;
  --surface-3:    #e7ebf2;

  --text:         var(--brand-navy);
  --text-soft:    #3b4a6b;
  --text-muted:   #6b7487;
  --text-inverse: #ffffff;
  --text-on-accent: var(--brand-navy);

  --border:       #e1e6ef;
  --border-strong:#c4cbd9;
  --divider:      #eef1f6;

  --accent:       var(--brand-yellow);
  --accent-2:     var(--brand-mint);
  --accent-ink:   var(--brand-navy);
  --link:         var(--brand-mint-deep);
  --link-hover:   var(--brand-navy);

  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;
  --info:    #0ea5e9;

  /* -------- Shadows -------- */
  --shadow-xs: 0 1px 2px rgba(10, 31, 68, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 31, 68, 0.08), 0 1px 2px rgba(10, 31, 68, 0.04);
  --shadow-md: 0 8px 20px rgba(10, 31, 68, 0.10), 0 2px 6px rgba(10, 31, 68, 0.06);
  --shadow-lg: 0 20px 40px rgba(10, 31, 68, 0.14), 0 4px 12px rgba(10, 31, 68, 0.08);
  --shadow-glow-yellow: 0 0 40px rgba(245, 197, 66, 0.35);
  --shadow-glow-mint:   0 0 40px rgba(45, 212, 168, 0.30);

  /* -------- Radii -------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* -------- Spacing scale -------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* -------- Typography -------- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xxs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 80px;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-normal:1.55;
  --lh-loose: 1.75;

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-wide:  0.04em;
  --ls-wider: 0.12em;

  /* -------- Layout -------- */
  --container: 1240px;
  --container-wide: 1400px;
  --container-narrow: 920px;
  --nav-h: 72px;

  /* -------- Motion -------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-4: 600ms;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --bg:           #070d1c;
  --bg-soft:      #0a1226;
  --bg-elevated:  #0f1a33;
  --bg-inverse:   #ffffff;
  --bg-accent:    #2a2010;
  --bg-mint:      #0d2a22;

  --surface:      #0f1a33;
  --surface-2:    #152444;
  --surface-3:    #1d2f58;

  --text:         #f2f5fb;
  --text-soft:    #c4cbd9;
  --text-muted:   #8891a8;
  --text-inverse: var(--brand-navy);
  --text-on-accent: var(--brand-navy);

  --border:       #1e2b4d;
  --border-strong:#2c3d64;
  --divider:      #152444;

  --link:         var(--brand-mint);
  --link-hover:   var(--brand-yellow);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Theme transitions — smooth color swap */
html, body, * {
  transition: background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}

/* Disable transition on theme-swap to prevent flicker on nav */
.no-transition, .no-transition * {
  transition: none !important;
}