/* Hirenode design tokens. Load fonts with:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet"> */
:root {
  /* Colors */
  --hn-navy: #014454;  /* Deep Network Navy */
  --hn-teal: #0C8092;  /* Hub Teal */
  --hn-cyan: #17C2D9;  /* Signal Cyan */
  --hn-teal-700: #0A6B7A;  /* Teal 700 */
  --hn-cyan-100: #D3F3F8;  /* Cyan 100 */
  --hn-teal-50: #EAF7F9;  /* Teal 50 */
  --hn-amber: #F2A93B;  /* Spark Amber */
  --hn-ink: #0F2830;  /* Ink */
  --hn-slate-600: #4A626C;  /* Slate 600 */
  --hn-slate-500: #5E7680;  /* Slate 500 */
  --hn-slate-300: #B5C4CA;  /* Slate 300 */
  --hn-mist: #EEF4F6;  /* Mist */
  --hn-white: #FFFFFF;  /* White */
  --hn-success: #16855A;  /* Success */
  --hn-warning: #B7791F;  /* Warning */
  --hn-error: #C53B3B;  /* Error */

  /* Typography */
  --hn-font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --hn-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --hn-text-display: 700 56px/1.1 var(--hn-font-heading);
  --hn-text-h1: 700 44px/1.15 var(--hn-font-heading);
  --hn-text-h2: 600 32px/1.2 var(--hn-font-heading);
  --hn-text-h3: 600 24px/1.3 var(--hn-font-heading);
  --hn-text-h4: 600 20px/1.35 var(--hn-font-heading);
  --hn-text-body-large: 400 18px/1.6 var(--hn-font-body);
  --hn-text-body: 400 16px/1.6 var(--hn-font-body);
  --hn-text-small: 400 14px/1.5 var(--hn-font-body);
  --hn-text-eyebrow: 600 13px/1.4 var(--hn-font-heading);

  /* Radius */
  --hn-radius-sm: 6px;
  --hn-radius-md: 10px;
  --hn-radius-lg: 16px;
  --hn-radius-pill: 999px;

  /* Spacing */
  --hn-space-1: 4px;
  --hn-space-2: 8px;
  --hn-space-3: 12px;
  --hn-space-4: 16px;
  --hn-space-6: 24px;
  --hn-space-8: 32px;
  --hn-space-12: 48px;
  --hn-space-16: 64px;
  --hn-space-24: 96px;

  /* Shadow */
  --hn-shadow-sm: 0 1px 2px rgba(1, 68, 84, 0.08);
  --hn-shadow-md: 0 6px 20px rgba(1, 68, 84, 0.10);
  --hn-shadow-lg: 0 18px 48px rgba(1, 68, 84, 0.14);

  --hn-gradient-brand: linear-gradient(135deg, #014454 0%, #0C8092 60%, #17C2D9 100%);
}
