/**
 * 2Fulfill DESIGN SYSTEM
 * Version: 2.0.0
 *
 * Usage: @import 'tokens.css';
 */

/* Switzer + Satoshi (must be first) */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&f[]=satoshi@300,400,500,700&display=swap');

/* Space Mono - Code only */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* BF Modernista - Display Font */
@font-face {
  font-family: 'BF Modernista';
  src: url('/fonts/BF_Modernista-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================
     COLORS - Bold Cyan Aesthetic (typo72typo inspired)
     ============================================ */

  /* Primary - Bold Cyan */
  --ti-cyan: hsl(170, 85%, 55%);
  --ti-cyan-dark: hsl(170, 80%, 45%);
  --ti-cyan-light: hsl(170, 90%, 65%);

  /* Neutrals */
  --ti-black: #0a0a0a;
  --ti-dark: #111111;
  --ti-surface: #161616;
  --ti-surface-elevated: #1c1c1c;
  --ti-border: #252525;
  --ti-border-light: #333333;
  --ti-muted: #555555;
  --ti-text-secondary: #888888;
  --ti-text: #e5e5e5;
  --ti-white: #ffffff;

  /* Accent = Cyan (single color, no gradient) */
  --ti-accent: var(--ti-cyan);
  --ti-accent-bright: var(--ti-cyan-light);
  --ti-accent-dark: var(--ti-cyan-dark);
  --ti-accent-muted: hsla(170, 85%, 55%, 0.12);
  --ti-accent-glow: hsla(170, 85%, 55%, 0.25);

  /* Hero backgrounds */
  --ti-hero-bg: var(--ti-cyan);
  --ti-hero-text: var(--ti-black);

  /* Brand - single color, no gradient */
  --ti-gradient-brand: var(--ti-cyan);
  --ti-gradient-spectrum: var(--ti-cyan);

  /* Secondary - Orange/Warm (kept for semantic use) */
  --ti-orange: hsl(25, 95%, 55%);
  --ti-orange-bright: hsl(25, 100%, 60%);
  --ti-orange-muted: hsla(25, 95%, 55%, 0.12);

  /* Tertiary - Purple */
  --ti-purple: #a855f7;
  --ti-purple-bright: #c084fc;
  --ti-purple-muted: rgba(168, 85, 247, 0.12);

  /* Semantic Colors */
  --ti-red: #ef4444;
  --ti-red-muted: rgba(239, 68, 68, 0.12);

  --ti-yellow: #facc15;
  --ti-yellow-muted: rgba(250, 204, 21, 0.12);

  /* --ti-cyan defined above as primary */

  --ti-green: #00ff88;
  --ti-green-muted: rgba(0, 255, 136, 0.12);

  --ti-blue: #3b82f6;
  --ti-blue-muted: rgba(59, 130, 246, 0.12);

  /* Frosted Glass */
  --ti-frost-bg: hsla(4, 20%, 12%, 0.85);
  --ti-frost-border: hsla(4, 50%, 50%, 0.15);
  --ti-frost-accent: hsla(4, 70%, 55%, 0.12);

  /* Gradients */
  --ti-gradient-brand: var(--ti-gradient-spectrum);
  --ti-gradient-dark: linear-gradient(180deg, var(--ti-black) 0%, var(--ti-dark) 100%);

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  /* Font Families */
  --ti-font-display: 'BF Modernista', -apple-system, sans-serif;
  --ti-font-heading: 'BF Modernista', -apple-system, sans-serif;
  --ti-font-body: 'Switzer', -apple-system, sans-serif;
  --ti-font-mono: 'Space Mono', 'Consolas', monospace;

  /* Font Sizes */
  --ti-text-xs: 0.75rem;     /* 12px */
  --ti-text-sm: 0.875rem;    /* 14px */
  --ti-text-base: 1rem;      /* 16px */
  --ti-text-lg: 1.125rem;    /* 18px */
  --ti-text-xl: 1.25rem;     /* 20px */
  --ti-text-2xl: 1.5rem;     /* 24px */
  --ti-text-3xl: 2rem;       /* 32px */
  --ti-text-4xl: 2.5rem;     /* 40px */
  --ti-text-5xl: 3.5rem;     /* 56px */
  --ti-text-6xl: 4.5rem;     /* 72px */

  /* Font Weights */
  --ti-font-light: 300;
  --ti-font-normal: 400;
  --ti-font-medium: 500;
  --ti-font-semibold: 600;
  --ti-font-bold: 700;

  /* Letter Spacing */
  --ti-tracking-tight: -0.02em;
  --ti-tracking-normal: 0;
  --ti-tracking-wide: 0.05em;
  --ti-tracking-wider: 0.06em;
  --ti-tracking-widest: 0.1em;

  /* Line Heights */
  --ti-leading-none: 1;
  --ti-leading-tight: 1.15;
  --ti-leading-snug: 1.3;
  --ti-leading-normal: 1.5;
  --ti-leading-relaxed: 1.65;

  /* ============================================
     SPACING
     ============================================ */

  --ti-space-0: 0;
  --ti-space-1: 0.25rem;   /* 4px */
  --ti-space-2: 0.5rem;    /* 8px */
  --ti-space-3: 0.75rem;   /* 12px */
  --ti-space-4: 1rem;      /* 16px */
  --ti-space-5: 1.25rem;   /* 20px */
  --ti-space-6: 1.5rem;    /* 24px */
  --ti-space-8: 2rem;      /* 32px */
  --ti-space-10: 2.5rem;   /* 40px */
  --ti-space-12: 3rem;     /* 48px */
  --ti-space-16: 4rem;     /* 64px */
  --ti-space-20: 5rem;     /* 80px */
  --ti-space-24: 6rem;     /* 96px */

  /* ============================================
     BORDERS & RADIUS
     ============================================ */

  --ti-radius-sm: 6px;
  --ti-radius-md: 8px;
  --ti-radius-lg: 12px;
  --ti-radius-xl: 16px;
  --ti-radius-2xl: 20px;
  --ti-radius-full: 9999px;

  --ti-border-width: 1px;

  /* ============================================
     EFFECTS
     ============================================ */

  /* Shadows */
  --ti-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ti-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --ti-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --ti-shadow-accent: 0 4px 20px var(--ti-accent-glow);
  --ti-shadow-glow: 0 0 40px var(--ti-accent-glow);

  /* Blur */
  --ti-blur-sm: 4px;
  --ti-blur-md: 10px;
  --ti-blur-lg: 20px;

  /* ============================================
     TRANSITIONS
     ============================================ */

  --ti-duration-fast: 150ms;
  --ti-duration-normal: 250ms;
  --ti-duration-slow: 400ms;

  --ti-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ti-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ti-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --ti-transition-fast: all var(--ti-duration-fast) var(--ti-ease-default);
  --ti-transition-normal: all var(--ti-duration-normal) var(--ti-ease-default);
  --ti-transition-slow: all var(--ti-duration-slow) var(--ti-ease-default);

  /* ============================================
     LAYOUT
     ============================================ */

  --ti-container-sm: 640px;
  --ti-container-md: 768px;
  --ti-container-lg: 1024px;
  --ti-container-xl: 1280px;
  --ti-container-max: 1400px;

  /* ============================================
     SALES CYCLE COLORS
     ============================================ */

  --ti-cycle-find: var(--ti-accent);
  --ti-cycle-configure: var(--ti-purple);
  --ti-cycle-quote: var(--ti-cyan);
  --ti-cycle-order: var(--ti-yellow);
  --ti-cycle-fulfill: var(--ti-orange);
  --ti-cycle-pay: var(--ti-green);
  --ti-cycle-connect: var(--ti-blue);
}

/* ============================================
   BASE STYLES
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ti-font-body);
  background: var(--ti-black);
  color: var(--ti-text);
  line-height: var(--ti-leading-normal);
}

h1 {
  font-family: var(--ti-font-display);
  font-weight: 300;
  letter-spacing: var(--ti-tracking-wide);
}

h2, h3, h4, h5, h6 {
  font-family: var(--ti-font-body);
  font-weight: 500;
  letter-spacing: var(--ti-tracking-normal);
}

/* ============================================
   COMPONENT: BUTTON
   ============================================ */

.ti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ti-space-2);
  padding: var(--ti-space-3) var(--ti-space-6);
  font-family: var(--ti-font-body);
  font-size: var(--ti-text-base);
  font-weight: var(--ti-font-medium);
  border-radius: var(--ti-radius-md);
  border: none;
  cursor: pointer;
  transition: var(--ti-transition-normal);
  text-decoration: none;
}

.ti-btn:hover {
  transform: translateY(-2px);
}

.ti-btn--primary {
  background: var(--ti-gradient-brand);
  color: var(--ti-white);
}

.ti-btn--primary:hover {
  opacity: 0.9;
  box-shadow: var(--ti-shadow-accent);
}

.ti-btn--secondary {
  background: transparent;
  color: var(--ti-text);
  border: var(--ti-border-width) solid var(--ti-border);
}

.ti-btn--secondary:hover {
  border-color: var(--ti-accent);
  color: var(--ti-accent);
}

.ti-btn--ghost {
  background: transparent;
  color: var(--ti-text-secondary);
}

.ti-btn--ghost:hover {
  background: var(--ti-surface);
  color: var(--ti-white);
}

/* ============================================
   COMPONENT: CARD (Frosted Glass)
   ============================================ */

.ti-card {
  background: var(--ti-frost-bg);
  backdrop-filter: blur(var(--ti-blur-md));
  -webkit-backdrop-filter: blur(var(--ti-blur-md));
  border: var(--ti-border-width) solid var(--ti-frost-border);
  border-radius: var(--ti-radius-lg);
  padding: var(--ti-space-6);
  transition: var(--ti-transition-normal);
}

.ti-card:hover {
  border-color: var(--ti-border-light);
  transform: translateY(-4px);
}

.ti-card--accent {
  border-color: var(--ti-accent);
  background: var(--ti-frost-accent);
}

.ti-card--solid {
  background: var(--ti-surface);
  backdrop-filter: none;
}

/* ============================================
   COMPONENT: BADGE
   ============================================ */

.ti-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ti-space-1) var(--ti-space-3);
  font-family: var(--ti-font-body);
  font-size: var(--ti-text-xs);
  font-weight: var(--ti-font-semibold);
  letter-spacing: var(--ti-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--ti-radius-full);
}

.ti-badge--accent {
  background: var(--ti-accent);
  color: var(--ti-white);
}

.ti-badge--outline {
  background: transparent;
  border: var(--ti-border-width) solid var(--ti-accent);
  color: var(--ti-accent);
}

/* ============================================
   COMPONENT: INPUT
   ============================================ */

.ti-input {
  width: 100%;
  padding: var(--ti-space-3) var(--ti-space-4);
  font-family: var(--ti-font-body);
  font-size: var(--ti-text-base);
  color: var(--ti-white);
  background: var(--ti-dark);
  border: var(--ti-border-width) solid var(--ti-border);
  border-radius: var(--ti-radius-md);
  outline: none;
  transition: var(--ti-transition-fast);
}

.ti-input:focus {
  border-color: var(--ti-accent);
  box-shadow: 0 0 0 3px var(--ti-accent-muted);
}

.ti-input::placeholder {
  color: var(--ti-muted);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.ti-text-accent { color: var(--ti-accent); }
.ti-text-muted { color: var(--ti-muted); }
.ti-text-white { color: var(--ti-white); }

.ti-bg-black { background: var(--ti-black); }
.ti-bg-dark { background: var(--ti-dark); }
.ti-bg-surface { background: var(--ti-surface); }

.ti-font-heading { font-family: var(--ti-font-heading); }
.ti-font-mono { font-family: var(--ti-font-mono); }

.ti-gradient-text {
  background: var(--ti-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Frosted glass utility */
.ti-frost {
  background: var(--ti-frost-bg);
  backdrop-filter: blur(var(--ti-blur-md));
  -webkit-backdrop-filter: blur(var(--ti-blur-md));
  border: var(--ti-border-width) solid var(--ti-frost-border);
}

/* ============================================
   FONT THEMES
   ============================================ */

/* Satoshi theme */
:root[data-font="satoshi"] {
  --ti-font-display: 'Satoshi', -apple-system, sans-serif;
  --ti-font-heading: 'Satoshi', -apple-system, sans-serif;
  --ti-font-body: 'Satoshi', -apple-system, sans-serif;
}