/*
================================================
 Theme Name:   K3 Child
 Author:       Kinetic3
 Author URI:   https://kinetic3.com
 Template:     generatepress
 Version:      0.1.0
 =============================================
*/

/* =========================
   DESIGN TOKENS (Custom Properties)
========================= */
:root {
  /* Header / Logo / Panels */
  --header-height: 83px;
  --logo-height: 40px;
  --slideout-width: 500px;

  /* Spacing */
  --spacing-xxs: clamp(0.375rem, 0.21vw + 0.333rem, 0.5rem); /* 6→8px */
  --spacing-xs: clamp(0.625rem, 0.625vw + 0.5rem, 1rem); /* 10→16px */
  --spacing-sm: clamp(0.875rem, 1.042vw + 0.542rem, 1.5rem); /* 14→24px */
  --spacing-md: clamp(1.5rem, 0.833vw + 1.333rem, 2rem); /* 24→32px */
  --spacing-lg: clamp(2rem, 1.667vw + 1.667rem, 3rem); /* 32→48px */
  --spacing-xl: clamp(2.75rem, 3.75vw + 2rem, 5rem); /* 44→80px */
  --spacing-xxl: clamp(4rem, 4.167vw + 3.167rem, 6.5rem); /* 64→104px */
  --spacing-xxxl: clamp(6rem, 6.667vw + 4.667rem, 10rem); /* 96→160px */

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Border tokens */
  --border-width: 1px;
  --divider-width: 1px;
  --border-color-light: var(--neutral-200);
  --border-color-medium: var(--neutral-300);
  --border-color-dark: var(--primary-900);

  /* 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 */

  /* Box Shadows - Buttons */
  --shadow-button:
    0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px -6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --shadow-button-hover:
    0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 32px -8px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --shadow-button-secondary:
    0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
  --shadow-button-secondary-hover:
    0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 20px -6px rgba(0, 0, 0, 0.12);

  /* 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: 0.75rem;
  --icon-sm: 0.875rem;
  --icon-md: 1.125rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  --icon-xxl: 3rem;

  /* Transitions */
  --transition-fast: 0.2s ease; /* Hover states: buttons, arrows, links */
  --transition-base: 0.3s ease; /* Card image zoom, general interactions */
  --ease-reveal: cubic-bezier(0.4, 0, 0.2, 1); /* Scroll reveal animations */

  /* Z-Index Scale */
  --z-base: 1;
  --z-elevated: 2;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal: 200;

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

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

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

  /* Font Size Scale */
  --font-size-tiny: clamp(0.75rem, 0.71rem + 0.2vw, 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-surface: var(--neutral-0);
  --bg-light: var(--neutral-50);
  --bg-base: var(--neutral-100);
  --bg-shade: var(--neutral-200);
  --bg-primary: var(--primary-600);
  --bg-dark: var(--primary-900);

  --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;
  }
}

/* =========================
   DARK MODE (uncomment to enable)
   Only semantic aliases change. Primitive scales (neutral, primary, accent) stay untouched.
========================= */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-surface: var(--neutral-900);
    --bg-light: var(--neutral-800);
    --bg-base: var(--neutral-800);
    --bg-shade: var(--neutral-700);
    --bg-dark: var(--neutral-50);

    --text-strong: var(--neutral-0);
    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --text-muted: var(--neutral-400);
    --text-inverse: var(--neutral-950);

    --link: var(--primary-400);
    --link-hover: var(--primary-300);
    --link-contrast: var(--primary-300);
    --link-contrast-hover: var(--primary-200);
    --focus-ring: var(--primary-400);

    --border-color-light: var(--neutral-700);
    --border-color-medium: var(--neutral-600);
    --border-color-dark: var(--neutral-400);

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    --shadow-md:
      0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:
      0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  }
}
*/

/* =========================
   GLOBAL BASE RESETS
========================= */

html {
  scroll-behavior: smooth;
}

/* View Transitions API (Progressive Enhancement) */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }
}

:is(h1, h2, h3, h4, h5, h6),
.balance {
  text-wrap: balance;
}

p,
blockquote,
li {
  text-wrap: pretty;
}

img {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

p {
  margin-bottom: 0;
}

#main {
  min-height: 65vh;
}

code {
  background-color: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  font-size: 0.9em;
  margin: 0;
  padding: 0.2em 0.4em;
  white-space: break-spaces;
}

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

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

::selection {
  background: var(--primary-600);
  color: var(--text-inverse);
}

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);
}

/* Emphasis styling for all headings */
:is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .text-h1,
    .text-h2,
    .text-h3,
    .text-h4,
    .text-h5,
    .text-h6
  )
  em {
  color: var(--link);
  font-family: "Times New Roman", Times, serif;
  font-size: 1.15em;
}

/* --------------------------------------------------------------------------
   Text Size Utilities
   -------------------------------------------------------------------------- */

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

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

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

/* =========================
   ACCESSIBILITY
========================= */

:where(
  a,
  button,
  [role="button"],
  input,
  select,
  textarea,
  .button
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@supports (color: color-mix(in oklab, #000 0%, #fff 100%)) {
  .button:focus-visible {
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--focus-ring) 35%, var(--bg-base));
    outline: none;
  }
}