/* ==========================================================================
   SenaForce — Design Tokens
   Deep navy base · electric cyan accent · violet secondary
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Ink — deep blues running toward black */
  --ink-950: #05070D;
  --ink-900: #0A0E1A;
  --ink-800: #111729;
  --ink-700: #1A2238;
  --ink-600: #27304A;
  --ink-500: #3A4666;

  /* Paper — neutral lights */
  --paper-50:  #FFFFFF;
  --paper-100: #F7F8FB;
  --paper-200: #EEF1F6;
  --paper-300: #DDE3EC;
  --paper-400: #B8C0CE;
  --paper-500: #7C8599;
  --paper-600: #515A71;

  /* Signal — electric cyan */
  --signal-50:  #E6FBFF;
  --signal-100: #B8F2FF;
  --signal-300: #5EE0FA;
  --signal-500: #00C2E8;
  --signal-600: #00A3C7;
  --signal-700: #0084A3;

  /* Pulse — violet */
  --pulse-300: #B5A0FF;
  --pulse-500: #7C5CFF;
  --pulse-700: #4F34C7;

  /* Semantic */
  --success: #2ED39A;
  --warning: #FFB547;
  --danger:  #FF5C7A;

  /* Semantic tokens — light mode */
  --bg:        var(--paper-50);
  --bg-soft:   var(--paper-100);
  --bg-muted:  var(--paper-200);
  --surface:   var(--paper-50);
  --surface-elevated: var(--paper-50);

  --fg:        var(--ink-900);
  --fg-muted:  var(--ink-500);
  --fg-subtle: var(--paper-500);
  --fg-on-accent: var(--ink-950);

  --border:        var(--paper-300);
  --border-strong: var(--paper-400);
  --border-subtle: var(--paper-200);

  --accent:         var(--signal-500);
  --accent-hover:   var(--signal-600);
  --accent-pressed: var(--signal-700);
  --accent-soft:    var(--signal-50);
  --secondary: var(--pulse-500);

  /* Typography */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  80px;

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

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.14em;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(10, 14, 26, 0.04);
  --shadow-sm: 0 2px 6px rgba(10, 14, 26, 0.06), 0 1px 2px rgba(10, 14, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 14, 26, 0.08), 0 2px 6px rgba(10, 14, 26, 0.04);
  --shadow-lg: 0 24px 64px rgba(10, 14, 26, 0.12), 0 4px 12px rgba(10, 14, 26, 0.06);
  --shadow-glow: 0 0 0 1px rgba(0, 194, 232, 0.35), 0 8px 32px rgba(0, 194, 232, 0.25);
  --shadow-glow-violet: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 8px 32px rgba(124, 92, 255, 0.25);

  --ring-focus: 0 0 0 3px rgba(0, 194, 232, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* Signature gradients */
  --gradient-mesh: radial-gradient(at 20% 10%, rgba(0,194,232,0.18) 0%, transparent 45%),
                   radial-gradient(at 80% 20%, rgba(124,92,255,0.15) 0%, transparent 50%),
                   radial-gradient(at 50% 90%, rgba(0,194,232,0.10) 0%, transparent 55%);
  --gradient-line: linear-gradient(90deg, transparent, var(--signal-500), transparent);
  --gradient-hero: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  --gradient-accent: linear-gradient(135deg, var(--signal-500) 0%, var(--pulse-500) 100%);
}

/* ==========================================================================
   ELEMENT STYLES
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 600; }
h1 { font-size: clamp(44px, 6vw, 80px); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: clamp(32px, 4vw, 60px); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: 500; }
h4 { font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: 500; }

p { margin: 0; color: var(--fg-muted); line-height: var(--lh-normal); }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
</content>
</invoke>