/* ==============================================
   IPforAgents - Responsive Design Tokens
   Fluid spacing, typography, and component sizing
   ============================================== */

:root {
  /* ========================================
     Fluid Spacing Scale
     Scales smoothly from mobile to desktop
     ======================================== */
  --space-3xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);   /* 4-6px */
  --space-2xs: clamp(0.375rem, 0.3rem + 0.375vw, 0.5rem);   /* 6-8px */
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);       /* 8-12px */
  --space-s: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);         /* 12-16px */
  --space-m: clamp(1rem, 0.8rem + 1vw, 1.5rem);             /* 16-24px */
  --space-l: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);           /* 24-32px */
  --space-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);            /* 32-48px */
  --space-2xl: clamp(3rem, 2rem + 5vw, 5rem);               /* 48-80px */
  --space-3xl: clamp(4rem, 3rem + 5vw, 6rem);               /* 64-96px */

  /* ========================================
     Fluid Typography Scale
     ======================================== */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);       /* 11-13px */
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);       /* 13-14px */
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);       /* 14-16px */
  --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);          /* 16-20px */
  --text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);        /* 20-28px */
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);        /* 24-32px */
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);            /* 32-48px */
  --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);            /* 40-64px */
  --text-5xl: clamp(3rem, 2rem + 5vw, 5rem);                /* 48-80px */

  /* ========================================
     Container Max-Widths
     Uses min() for automatic responsiveness
     ======================================== */
  --container-xs: min(88vw, 400px);
  --container-sm: min(90vw, 600px);
  --container-md: min(92vw, 1000px);
  --container-lg: min(94vw, 1200px);
  --container-xl: min(96vw, 1400px);

  /* ========================================
     Visualization Component Sizing
     Fluid sizes for charts, nodes, etc.
     ======================================== */

  /* Donut charts: 150px desktop -> 100px mobile */
  --viz-donut: clamp(100px, 20vw, 150px);
  --viz-donut-sm: clamp(80px, 15vw, 120px);

  /* Liquid fill: 120px desktop -> 80px mobile */
  --viz-liquid: clamp(80px, 18vw, 120px);

  /* Progress ring: 100px desktop -> 70px mobile */
  --viz-ring: clamp(70px, 15vw, 100px);

  /* Bar chart height */
  --viz-bar-height: clamp(80px, 15vw, 120px);

  /* Network nodes */
  --viz-node: clamp(40px, 8vw, 50px);
  --viz-node-lg: clamp(55px, 10vw, 70px);

  /* Version orbs */
  --viz-orb-sm: clamp(28px, 6vw, 40px);
  --viz-orb-md: clamp(40px, 8vw, 60px);
  --viz-orb-lg: clamp(55px, 10vw, 80px);

  /* ========================================
     Chart & Data Display
     ======================================== */
  --chart-wrapper-height: clamp(150px, 25vw, 200px);
  --bar-label-width: clamp(60px, 12vw, 100px);

  /* ========================================
     Decorative Elements
     CTA orbs, holo-seals, orbit rings
     ======================================== */
  --cta-orb-lg: clamp(200px, 40vw, 400px);
  --cta-orb-md: clamp(150px, 30vw, 300px);
  --holo-seal: clamp(140px, 30vw, 300px);

  /* Changelog orbit rings */
  --orbit-ring-1: clamp(120px, 22vw, 200px);
  --orbit-ring-2: clamp(220px, 38vw, 350px);
  --orbit-ring-3: clamp(300px, 52vw, 500px);

  /* ========================================
     Layout Dimensions
     ======================================== */
  --sidebar-width: clamp(200px, 22vw, 260px);
  --sidebar-collapsed: 60px;

  /* Card & component gaps */
  --gap-cards: clamp(1rem, 2vw, 2rem);
  --gap-sections: clamp(3rem, 6vw, 6rem);

  /* Section padding */
  --padding-section-x: clamp(1rem, 3vw, 2rem);
  --padding-section-y: clamp(3rem, 6vw, 6rem);
  --padding-card: clamp(1rem, 2vw, 1.5rem);
  --padding-nav: clamp(0.75rem, 1.5vw, 1.5rem);

  /* ========================================
     Icon & Button Sizing
     ======================================== */
  --icon-sm: clamp(16px, 3vw, 20px);
  --icon-md: clamp(20px, 4vw, 24px);
  --icon-lg: clamp(32px, 6vw, 48px);

  --btn-padding-x: clamp(1rem, 2vw, 1.5rem);
  --btn-padding-y: clamp(0.5rem, 1vw, 0.75rem);

  /* ========================================
     Breakpoint Reference (for documentation)
     Use @media queries with these values
     ======================================== */
  /* --bp-foldable: 400px;   Galaxy Fold inner screen */
  /* --bp-mobile: 480px;     Small phones */
  /* --bp-phablet: 640px;    Large phones */
  /* --bp-tablet: 768px;     Tablets portrait */
  /* --bp-laptop: 1024px;    Tablets landscape, small laptops */
  /* --bp-desktop: 1280px;   Standard desktop */
  /* --bp-wide: 1536px;      Wide screens */
}

/* ========================================
   Foldable Device Overrides (280-400px)
   Extra aggressive scaling for tiny screens
   ======================================== */
@media (max-width: 400px) {
  :root {
    /* Reduce typography even further */
    --text-4xl: clamp(1.75rem, 8vw, 2.5rem);
    --text-3xl: clamp(1.5rem, 7vw, 2rem);
    --text-2xl: clamp(1.25rem, 6vw, 1.75rem);

    /* Tighter spacing */
    --space-2xl: clamp(2rem, 8vw, 3rem);
    --space-xl: clamp(1.5rem, 6vw, 2rem);

    /* Smaller visualizations */
    --viz-donut: clamp(80px, 25vw, 100px);
    --viz-liquid: clamp(70px, 22vw, 90px);
    --viz-ring: clamp(60px, 20vw, 80px);
  }
}