/* Design Tokens - AdaTech (Cursor Design System) */
:root {
  /* === Colors (from Cursor Design System) === */

  /* Brand & Accent */
  --primary: #f54e00;           /* Cursor Orange - CTA, wordmark */
  --primary-hover: #ff6a1a;
  --primary-active: #d04200;    /* Press state */
  --on-primary: #ffffff;

  /* Canvas & Surfaces */
  --canvas: #f7f7f4;            /* Warm cream page floor */
  --canvas-soft: #fafaf7;       /* IDE-pane background */
  --surface-card: #ffffff;      /* White card surface */
  --surface-strong: #e6e5e0;    /* Badges, tag pills */

  /* Text */
  --ink: #26251e;               /* Display, body emphasis - warm near-black */
  --body: #5a5852;              /* Default running-text */
  --body-strong: #26251e;       /* Same as ink */
  --muted: #807d72;             /* Sub-titles */
  --muted-soft: #a09c92;        /* Disabled text */

  /* Hairlines & Borders */
  --hairline: #e6e5e0;          /* 1px divider */
  --hairline-soft: #efeee8;     /* Lighter divider */
  --hairline-strong: #cfcdc4;   /* Stronger panel outline */

  /* Timeline (AI-action signature pastels) */
  --timeline-thinking: #dfa88f; /* Peach */
  --timeline-grep: #9fc9a2;     /* Mint */
  --timeline-read: #9fbbe0;     /* Pastel blue */
  --timeline-edit: #c0a8dd;     /* Lavender */
  --timeline-done: #c08532;     /* Warm gold */

  /* Semantic */
  --success: #1f8a65;
  --error: #cf2d56;

  /* Glow effects (subtle on light theme) */
  --glow-primary: rgba(245, 78, 0, 0.1);
  --glow-primary-strong: rgba(245, 78, 0, 0.2);

  /* === Typography === */
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  /* Display sizes (magazine style - weight 400, negative tracking) */
  --text-display-mega: clamp(2.5rem, 5vw + 1rem, 4.5rem);  /* 72px max */
  --text-display-lg: clamp(1.75rem, 3vw + 0.5rem, 2.25rem); /* 36px */
  --text-display-md: clamp(1.375rem, 2vw + 0.5rem, 1.625rem); /* 26px */
  --text-display-sm: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem); /* 22px */

  /* Body sizes */
  --text-body-lg: 1.125rem;     /* 18px */
  --text-body-md: 1rem;         /* 16px */
  --text-body-sm: 0.875rem;     /* 14px */
  --text-caption: 0.8125rem;    /* 13px */
  --text-caption-sm: 0.6875rem; /* 11px */

  /* Letter spacing (Cursor style - tight on display) */
  --tracking-tighter: -0.03em;  /* -2.16px equivalent at 72px */
  --tracking-tight: -0.02em;    /* -0.72px equivalent at 36px */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;      /* 0.88px for uppercase captions */

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.1;         /* Hero h1 */
  --leading-snug: 1.2;          /* Section heads */
  --leading-normal: 1.4;        /* Titles */
  --leading-relaxed: 1.5;       /* Body */

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* === Spacing (4px base unit) === */
  --space-xxs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-base: 1rem;     /* 16px */
  --space-md: 1.25rem;    /* 20px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-section: 5rem;  /* 80px - Cursor section rhythm */

  /* === Border Radius (Cursor scale) === */
  --rounded-none: 0px;
  --rounded-xs: 0.25rem;  /* 4px - inline tags */
  --rounded-sm: 0.375rem; /* 6px - compact rows */
  --rounded-md: 0.5rem;   /* 8px - CTA buttons, form inputs */
  --rounded-lg: 0.75rem;  /* 12px - Cards, IDE panes */
  --rounded-xl: 1rem;     /* 16px - Larger feature cards */
  --rounded-full: 9999px; /* Pills, badges */

  /* === Shadows (hairline-only depth for Cursor style) === */
  /* No drop shadows - using hairlines + surface contrast instead */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-glow: 0 0 0 3px var(--glow-primary);
  --shadow-glow-strong: 0 0 0 4px var(--glow-primary-strong);

  /* === Transitions === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* === Layout === */
  --container-max: 1440px;
  --container-padding: 64px;
  --nav-height: 4rem;     /* 64px */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  :root {
    --container-padding: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --space-section: 3rem;
    --container-padding: 20px;
    --nav-height: 3.5rem;
  }
}