/**
 * Help Center Design Tokens
 * Adapted from LoveForm Help Center Design System
 * Based on live measurements from https://www.loveform.com/help
 */

:root {
  /* ============================================
   * COLOR TOKENS (LoveForm Palette)
   * ============================================ */

  /* Primary Colors - LoveForm Near-Black */
  --hc-color-primary: rgb(34, 34, 34);
  --hc-color-primary-hover: rgb(0, 0, 0);

  /* Secondary Colors - Medium Gray */
  --hc-color-secondary: rgb(113, 113, 113);
  --hc-color-tertiary: rgb(176, 176, 176);

  /* Background Colors */
  --hc-bg-primary: rgb(255, 255, 255);
  --hc-bg-secondary: rgb(247, 247, 247);
  --hc-bg-tertiary: rgb(240, 240, 240);

  /* Border Colors */
  --hc-border-light: rgb(235, 235, 235);
  --hc-border-base: rgb(221, 221, 221);
  --hc-border-dark: rgb(176, 176, 176);

  /* Interactive Colors */
  --hc-color-hover-bg: rgb(247, 247, 247);
  --hc-color-focus-border: rgb(34, 34, 34);
  --hc-color-clear-button: rgb(232, 232, 232);
  --hc-color-clear-button-hover: rgb(208, 208, 208);

  /* Semantic Colors */
  --hc-color-success: rgb(0, 132, 137);
  --hc-color-error: rgb(0, 132, 137);  /* Changed from LoveForm red to Buggy teal */
  --hc-gradient-error: linear-gradient(135deg, rgb(0, 132, 137), rgb(0, 176, 181));  /* Buggy teal gradient */
  --hc-color-warning: rgb(255, 180, 0);
  --hc-color-info: rgb(0, 132, 137);


  /* ============================================
   * TYPOGRAPHY TOKENS (LoveForm Scale)
   * ============================================ */

  /* Font Families */
  --hc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hc-font-family-cereal: 'Airbnb Cereal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Font Sizes - LoveForm Help Center Scale */
  --hc-font-size-hero: 48px;        /* Main "How can we help?" heading */
  --hc-font-size-h2: 26px;          /* "Guides for getting started" heading */
  --hc-font-size-h3: 18px;          /* Article titles, top links */
  --hc-font-size-base: 16px;        /* Body text, search input */
  --hc-font-size-small: 14px;       /* Metadata, helper text */
  --hc-font-size-xs: 13px;          /* Category tags, labels */
  --hc-font-size-micro: 12px;       /* Keyboard shortcuts, fine print */

  /* Font Weights */
  --hc-font-weight-normal: 400;
  --hc-font-weight-medium: 500;
  --hc-font-weight-semibold: 600;
  --hc-font-weight-bold: 700;

  /* Line Heights */
  --hc-line-height-hero: 56px;      /* Main heading line height - matches LoveForm's rendered height */
  --hc-line-height-h2: 30px;        /* Section heading line height */
  --hc-line-height-tight: 1.25;
  --hc-line-height-base: 1.5;
  --hc-line-height-relaxed: 1.6;


  /* ============================================
   * SPACING TOKENS (8px Grid)
   * ============================================ */

  --hc-space-xs: 4px;
  --hc-space-sm: 8px;
  --hc-space-md: 16px;
  --hc-space-lg: 24px;
  --hc-space-xl: 32px;
  --hc-space-2xl: 48px;
  --hc-space-3xl: 64px;


  /* ============================================
   * BORDER TOKENS
   * ============================================ */

  /* Border Radius */
  --hc-radius-sm: 4px;
  --hc-radius-base: 8px;
  --hc-radius-md: 12px;
  --hc-radius-lg: 16px;
  --hc-radius-xl: 24px;
  --hc-radius-full: 9999px;   /* Pills (search input, buttons) */
  --hc-radius-circle: 50%;    /* Circular buttons */

  /* Border Width */
  --hc-border-width-thin: 1px;
  --hc-border-width-base: 2px;


  /* ============================================
   * SHADOW TOKENS (LoveForm Soft Shadows)
   * ============================================ */

  --hc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --hc-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.12);
  --hc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --hc-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.15);
  --hc-shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.18);

  /* Focus Shadow */
  --hc-shadow-focus: 0 2px 8px rgba(0, 0, 0, 0.12);


  /* ============================================
   * ANIMATION TOKENS
   * ============================================ */

  /* Duration */
  --hc-duration-instant: 0ms;
  --hc-duration-fast: 150ms;
  --hc-duration-base: 200ms;
  --hc-duration-slow: 300ms;

  /* Easing Functions */
  --hc-ease-linear: linear;
  --hc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --hc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --hc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Transitions */
  --hc-transition-fast: all 150ms ease-in-out;
  --hc-transition-base: all 200ms ease-in-out;
  --hc-transition-slow: all 300ms ease-in-out;


  /* ============================================
   * Z-INDEX TOKENS
   * ============================================ */

  --hc-z-index-dropdown: 1000;
  --hc-z-index-sticky: 1020;
  --hc-z-index-modal-backdrop: 1040;
  --hc-z-index-modal: 1050;
  --hc-z-index-tooltip: 1070;


  /* ============================================
   * COMPONENT-SPECIFIC TOKENS
   * ============================================ */

  /* Search Input - BUG-154: Pill design matching resource center */
  --hc-search-height: 64px;           /* Match resource center/Airbnb pill */
  --hc-search-padding-vertical: 14px;
  --hc-search-padding-left: 24px;
  --hc-search-padding-right: 70px;    /* Room for 48px button + padding */
  --hc-search-font-size: 16px;
  --hc-search-border-radius: 100px;   /* Full pill shape */

  /* Clear Button */
  --hc-clear-button-size: 32px;
  --hc-clear-button-right: 90px;

  /* Autocomplete Dropdown */
  --hc-autocomplete-max-height: 400px;
  --hc-autocomplete-border-radius: 12px;
  --hc-autocomplete-gap: 8px;

  /* Guide Cards */
  --hc-card-width: 254px;
  --hc-card-height: 344px;
  --hc-card-border-radius: 0px;  /* Rectangular */

  /* Container */
  --hc-container-max-width: 1176px;
  --hc-container-padding-desktop: 40px;
  --hc-container-padding-mobile: 56px;
  --hc-article-readable-max-width: 632px;


  /* ============================================
   * BREAKPOINT TOKENS
   * ============================================ */

  --hc-breakpoint-mobile: 375px;
  --hc-breakpoint-tablet: 768px;
  --hc-breakpoint-desktop: 1024px;
  --hc-breakpoint-wide: 1440px;
}


/* ============================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================ */

/* Tablet & Mobile */
@media (max-width: 768px) {
  :root {
    /* Reduce font sizes slightly for smaller screens */
    --hc-font-size-hero: 36px;
    --hc-font-size-h2: 20px;

    /* Adjust search input for mobile */
    --hc-search-padding-right: 100px;
    --hc-clear-button-right: 70px;
    --hc-clear-button-size: 28px;

    /* Reduce autocomplete height on mobile */
    --hc-autocomplete-max-height: 200px;

    /* Adjust container padding */
    --hc-container-padding-desktop: 20px;
  }
}