/*
====================================
 Theme Name:   TestDepot
 Author:       Kinetic3
 Author URI:   https://kinetic3.com
 Description:  Custom, performance-optimized child theme built for TestDepot on top of GeneratePress by Kinetic3.
 Template:     generatepress
 Version:      0.2.0
 ====================================
*/

/* =========================
   DESIGN TOKENS (Custom Properties)
========================= */
:root {
  /* Header / Logo / Panels */
  --header-height: 72px;
  --logo-height: 40px;
  --slideout-width: 500px;
  
  /* Spacing */
  --spacing-xxs:  clamp(0.375rem, 0.5vw + 0.125rem, 0.5rem);  /* 6→8px */
  --spacing-xs:   clamp(0.75rem, 1vw + 0.25rem, 1rem);        /* 12→16px */
  --spacing-sm:   clamp(1rem, 1.5vw + 0.375rem, 1.5rem);      /* 16→24px */
  --spacing-md:   clamp(1.25rem, 2vw + 0.5rem, 2rem);         /* 20→32px */
  --spacing-lg:   clamp(2rem, 3vw + 0.75rem, 3rem);           /* 32→48px */
  --spacing-xl:   clamp(3rem, 5vw + 1.25rem, 5rem);           /* 48→80px */
  --spacing-xxl: clamp(4rem, 6.5vw + 1.5rem, 6.5rem);         /* 64→104px */
  --spacing-xxxl: clamp(6rem, 4.1rem + 4.5vw, 10rem);         /* 96→160px */
  
  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Border tokens */
  --border-width: 1px;
  --border-color-light: var(--neutral-200);
  --border-color-medium: var(--neutral-500);
  --border-color-dark: var(--neutral-800);
  
  /* Box Shadow */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);                                            /* Headers, cards at rest */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);    /* Cards on hover, dropdowns, elevated elements */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);  /* Modals, overlays, mobile menus */
  
  /* Containers */
  --container-sm: 48rem;
  --container-md: 64rem;
  --container-lg: var(--gb-container-width);
  
  /* Sections */
  --section-sm: clamp(1.5rem, 0.6818rem + 1.8182vw, 3.5rem);    /* 24→56px */
  --section-md: clamp(2.5rem, 1.1364rem + 3.0303vw, 5.5rem);    /* 40→88px */
  --section-lg: clamp(3.5rem, 1.5909rem + 4.2424vw, 7rem);      /* 56→112px */
  --section-xl: clamp(4.5rem, 2.0455rem + 5.4545vw, 9rem);      /* 72→144px */
  --section-xxl: clamp(5.5rem, 2.5rem + 6.6667vw, 11rem);       /* 88→176px */
  
  /* Icons (aligned with spacing) */
  --icon-xs: 1rem;
  --icon-sm: 1.5rem;
  --icon-md: 2rem;
  --icon-lg: 3rem;

  /* Global Padding */
  --padding-global: 5%;

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

  /* Line Height */
  --line-height-body: 1.4;
  --line-height-head: 1.1;

/* Font Size Scale */
  --font-size-tiny: clamp(0.75rem, 0.71rem + 0.20vw, 0.8125rem);            /* 12→13px */
  --font-size-xs: clamp(0.875rem, 0.8523rem + 0.0909vw, 0.9375rem);         /* 14→15px */
  --font-size-sm: clamp(0.875rem, 0.84rem + 0.22vw, 1rem);                  /* 14→16px */
  --font-size-regular: clamp(0.9375rem, 0.8523rem + 0.3409vw, 1.125rem);    /* 15→18px (h6) */
  --font-size-md: clamp(1.125rem, 1.0227rem + 0.4091vw, 1.3125rem);         /* 18→21px (h5) */
  --font-size-lg: clamp(1.3125rem, 1.1477rem + 0.6591vw, 1.6875rem);        /* 21→27px (h4) */
  --font-size-xl: clamp(1.6875rem, 1.4205rem + 1.0682vw, 2.375rem);         /* 27→38px (h3) */
  --font-size-xxl: clamp(1.875rem, 1.5909rem + 1.1364vw, 2.625rem);         /* 30→42px (h2) */
  --font-size-xxxl: clamp(2.25rem, 1.8409rem + 1.6364vw, 3rem);             /* 36→48px (h1) */
  --font-size-hero: clamp(3rem, 2.2727rem + 2.9091vw, 4.5rem);              /* 48→72px */

  /* Semantic Color Aliases */
  --bg-white: var(--neutral-0);
  --bg-light: var(--neutral-50);
  --bg-base: var(--neutral-100);
  --bg-shade: var(--neutral-200);
  --bg-dark: var(--neutral-900);
  --bg-menu: var(--neutral-100);

  --text-strong: var(--neutral-950);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-600);
  --text-inverse: var(--neutral-0);

  --link: var(--primary-600);
  --link-hover: var(--primary-700);
  --link-contrast: var(--primary-700);
  --link-contrast-hover: var(--primary-800);
  --focus-ring: var(--primary-500);
}

@media (max-width: 767px) {
  :root {
    --header-height: 73px;
    --logo-height: 30px;
    --slideout-width: 300px;
  }
}

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

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--gp-font--body);
  font-size: var(--font-size-regular);
  letter-spacing: -.02em;
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
}

a:hover, 
a:focus, 
a:active {
  color: var(--link-hover);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.text-h1, .text-h2, .text-h3,
.text-h4, .text-h5, .text-h6 {
  color: var(--text-strong);
  font-family: var(--gp-font--headings);
  font-weight: var(--font-weight-headings);
  letter-spacing: -0.04em;
  line-height: var(--line-height-head);
  margin: 0 0 0.5em 0;
}

/* Map headings + utility classes to tokens */
h1, .text-h1 { font-size: var(--font-size-xxxl); }
h2, .text-h2 { font-size: var(--font-size-xxl); }
h3, .text-h3 { font-size: var(--font-size-xl); }
h4, .text-h4 { font-size: var(--font-size-lg); }
h5, .text-h5 { font-size: var(--font-size-md); }
h6, .text-h6 { font-size: var(--font-size-regular); }

/* --------------------------------------------------------------------------
   Text Size Utilities
   -------------------------------------------------------------------------- */
   
.text-size-tiny     { font-size: var(--font-size-tiny); }      /* 12→13px */
.text-size-xs       { font-size: var(--font-size-xs); }        /* 14→15px */
.text-size-sm       { font-size: var(--font-size-sm); }        /* 14→16px */
.text-size-regular  { font-size: var(--font-size-regular); }   /* 15→18px */
.text-size-md       { font-size: var(--font-size-md); }        /* 18→21px */
.text-size-lg       { font-size: var(--font-size-lg); }        /* 21→27px */
.text-size-xl       { font-size: var(--font-size-xl); }        /* 27→38px */
.text-size-xxl      { font-size: var(--font-size-xxl); }       /* 30→42px */
.text-size-xxxl     { font-size: var(--font-size-xxxl); }      /* 36→48px */
.text-size-hero     { font-size: var(--font-size-hero); }      /* 48→72px */

/* --------------------------------------------------------------------------
   Line Height Utilities
   -------------------------------------------------------------------------- */

.line-height-body {
  line-height: var(--line-height-body);
}