/**
 * REFERRA DESIGN SYSTEM
 * Inspired by Linear's restraint: quiet surfaces, crisp type, tiny details
 * 
 * Philosophy:
 * - Elevation through layering, not shadows
 * - Subtle borders and rings for depth
 * - Gradient accents only for micro-elements
 * - High information density without clutter
 */

:root {
  /* ===== SURFACES ===== */
  /* Layered neutrals - never pure white/black */
  --bg-base: #FAFAFC;
  --bg-elev1: #FFFFFF;
  --bg-elev2: #F7F8FA;
  --line-soft: rgba(0, 0, 0, 0.06);
  --line-hard: rgba(0, 0, 0, 0.12);

  /* ===== TYPOGRAPHY ===== */
  /* Using Inter at specific sizes with precise tracking */
  --text-primary: rgba(13, 13, 18, 0.96);
  --text-secondary: rgba(13, 13, 18, 0.72);
  --text-tertiary: rgba(13, 13, 18, 0.48);
  --text-quaternary: rgba(13, 13, 18, 0.32);
  
  /* Font sizes - constrained to 14/16/18/24 */
  --text-xs: 0.875rem;    /* 14px */
  --text-sm: 1rem;        /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.5rem;      /* 24px */
  --text-xl: 2rem;        /* 32px - for hero only */
  --text-2xl: 3rem;       /* 48px - for hero only */
  
  /* Letter spacing */
  --tracking-tight: -0.02em;  /* -0.2px at 14px */
  --tracking-normal: 0;

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

  /* ===== RADII ===== */
  /* Strict token system, no arbitrary values */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ===== ELEVATION ===== */
  /* Subtle borders + rings instead of heavy shadows */
  --card-border: 1px solid var(--line-soft);
  --card-ring: 0 0 0 1px rgba(0, 0, 0, 0.04);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ===== ACCENTS ===== */
  /* Gradient for tiny elements only - never big fills */
  --accent-from: #149FB8;
  --accent-to: #107a8f;
  --accent-solid: #149FB8;
  
  /* Focus ring - 2px gradient stroke */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-solid);

  /* ===== SPACING SCALE ===== */
  /* Constrained to 4/6/8/12/16/20/24 - enforces rhythm */
  --space-1: 0.25rem;   /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ===== STATUS COLORS ===== */
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-error: #ef4444;
  --status-info: var(--accent-solid);

  /* ===== TRANSITIONS ===== */
  /* Fast, consistent timing - 180ms ease-out */
  --transition-fast: 180ms ease-out;
  --transition-base: 180ms ease-out;
}

/* ===== DARK MODE TOKENS (Pricing Card) ===== */
:root {
  /* Dark card specific tokens */
  --bg-elev1-dark: #0B0D10;
  --bg-elev2-dark: #121620;
  --fg-strong: rgba(255, 255, 255, 0.94);
  --fg-soft: rgba(255, 255, 255, 0.72);
  --line-soft-dark: rgba(255, 255, 255, 0.06);
  --line-mid: rgba(255, 255, 255, 0.08);
  --ring-outer: rgba(0, 0, 0, 0.25);
  --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.35);
  --accent-a: #7A66FF; /* indigo */
  --accent-b: #4BD0FF; /* cyan */
}

/**
 * WHY THESE CHOICES:
 * 
 * 1. Layered surfaces create depth without heavy shadows
 *    - Each elevation level is a subtle step up
 *    - Maintains hierarchy without visual noise
 * 
 * 2. Constrained type scale forces consistency
 *    - Only 14/16/18/24px with specific weights
 *    - Prevents arbitrary font sizing
 * 
 * 3. Alpha-based colors for better layering
 *    - Text colors use rgba for natural blending
 *    - Borders use alpha for subtle separation
 * 
 * 4. Tiny radii keep things crisp
 *    - Max 16px radius maintains sharp aesthetic
 *    - No pill shapes except for badges
 * 
 * 5. Ring + border elevation pattern
 *    - Subtle outer ring + inner border = depth
 *    - No reliance on heavy drop shadows
 */