/* base.css — reset + tokens + themes */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: optional;
}

:root {
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-head: 'Space Grotesk', 'Inter', sans-serif;

  /* spacing scale (primitive) */
  --space-2xs: 0.375rem; /* 6px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.25rem; /* 20px */
  --space-xl: 1.5rem; /* 24px */
  --space-2xl: 2rem; /* 32px */
  --space-3xl: 2.5rem; /* 40px */
  --space-4xl: 3rem; /* 48px */

  /* spacing aliases (semantic) */
  --space-text-stack: var(--space-sm);
  --space-heading-to-text: var(--space-sm);
  --space-control-gap: var(--space-xs);
  --space-card-padding: var(--space-md);
  --space-container-gap: var(--space-lg);
  --space-section-y: clamp(var(--space-2xl), 8vh, 5rem);
  --space-section-x: var(--space-md);
  --space-nav-to-main: var(--space-lg);

  /* layout-scoped sizing tokens */
  --hero-padding-block: clamp(2.5rem, 11svh, 5rem);
  --hero-padding-inline: clamp(0.8rem, 5vw, 3rem);
  --hero-badge-size: clamp(8rem, 6vw, 12rem);
  --about-cta-margin-block: clamp(4rem, 12vh, 8rem);
  --about-cta-margin-block-mobile: clamp(3rem, 10vh, 5rem);
  --tools-min-height: clamp(8rem, 28svh, 16rem);
  --tools-padding-top: clamp(0.5rem, 2svh, 2.5rem);
  --tools-padding-bottom: clamp(0.5rem, 2svh, 2.5rem);

  /* spacing aliases (legacy compatibility) */
  --space-1: var(--space-xs); /* 8px */
  --space-2: var(--space-sm); /* 12px */
  --space-3: var(--space-md); /* 16px */
  --radius: 0.5rem; /* 8px */
  /* Control hover brighten ratio for UI controls (percentage). Used to tweak hover text brightness in dark mode. */
  --control-hover-brighten: 50%;
  --surface-border: transparent;
  --surface-shadow: transparent;
  --text-hero: #ffffff;
  --color-danger: #d14b63;
  --color-tool-accent: #1f9b86;
  --color-submit: #0f6e9f;
  --color-submit-foreground: #eaf2ff;
}

:root[data-theme='dark'] {
  --bg-0: #0c1624;
  --bg-1: #121c2b;
  --bg-2: #1a2740;

  --text-0: #eaf2ff;
  --text-1: #b9c7e0; /* slightly less saturated for cleaner look */
  --muted: #8fa2be;

  /* UNIFIED TEAL SCALE (brand identity) */
  --color-primary: #35d3db; /* your base */
  --color-primary-hover: #2ab4b8;
  --color-primary-low: #11363a;

  /* SECONDARY = slightly deeper teal, same hue neighborhood */
  --color-secondary: #23b6c8;

  /* TERTIARY = light teal, slightly desaturated for polish */
  --color-tertiary: #87f4ce;

  /* ACCENT = greenish-teal but lower saturation */
  --color-accent: #1f9b86;

  --surface-border: color-mix(in srgb, var(--color-primary) 12%, var(--bg-2));
  --surface-shadow: color-mix(in srgb, var(--color-primary) 22%, transparent);
  --text-hero: #eaf2ff;
  --color-danger: #ef5c78;
  --color-tool-accent: #2db06f;
  --color-submit: #0c5494;
  --color-submit-foreground: var(--text-0);
}

:root[data-theme='light'] {
  --bg-0: #f4f7fb;
  --bg-1: #ffffff;
  --bg-2: #e7eef7;

  --text-0: #0e1421;
  --text-1: #44536d;
  --muted: #60708b;

  /* TEAL SYSTEM MIRRORED FROM DARK */
  --color-primary: #1a8d98;
  --color-primary-hover: #167883;

  --color-secondary: #30a8b6;

  --color-tertiary: #b5ffe3;

  --color-accent: #21b39c;

  --surface-border: color-mix(in srgb, var(--color-primary) 14%, var(--bg-2));
  --surface-shadow: color-mix(in srgb, var(--color-primary) 32%, transparent);
  --text-hero: #ffffff;
  --color-danger: #b63a4f;
  --color-tool-accent: #0f4c81;
  --color-submit: #1485b2;
  --color-submit-foreground: var(--bg-1);
}

/* Basic reset */
* {
  box-sizing: border-box;
}
/* Root font-size: use rem units site-wide. We use a fluid clamp to scale between
   a comfortable minimum and maximum across viewport sizes. This keeps typography
   proportional while allowing components sized with rem to adapt automatically. */
html {
  /* base fallback */
  font-size: 1rem; /* 1rem = 16px by default */
  /* fluid scaling: min 14px (0.875rem), preferred scales with viewport, max 18px (1.125rem) */
  font-size: clamp(0.875rem, 0.95rem + 0.5vw, 1.125rem);
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg-0);
  color: var(--text-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2 {
  margin: 0;
  /* text-transform: uppercase; */
  color: var(--color-primary);
  font-weight: 600;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
}

/* Utility */
.muted {
  color: var(--muted);
}

:focus-visible {
  outline: 0.1875rem solid var(--color-secondary); /* 3px */
  outline-offset: 0.125rem; /* 2px */
}

:root[data-theme='dark'] {
  scrollbar-color: color-mix(in srgb, var(--color-secondary) 42%, var(--bg-2))
    color-mix(in srgb, var(--bg-1) 88%, transparent);
  /* scrollbar-width: thin; */
}

:root[data-theme='dark'] ::-webkit-scrollbar {
  width: 0.7rem;
  height: 0.7rem;
}

:root[data-theme='dark'] ::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
}

:root[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-secondary) 42%, var(--bg-2));
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--bg-1) 88%, transparent);
}

:root[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-primary) 48%, var(--bg-2));
}

@media (max-width: 68.75rem) {
  :root {
    --space-section-y: clamp(1.875rem, 7vh, 4rem);
  }
}

@media (max-width: 62rem) {
  :root {
    --space-section-y: clamp(1.625rem, 6vh, 3.25rem);
    --space-nav-to-main: var(--space-md);
  }
}

@media (max-width: 56rem) {
  :root {
    --space-section-y: clamp(1.5rem, 5vh, 3rem);
  }
}

@media (max-width: 48rem) {
  :root {
    --space-section-y: var(--space-2xl);
    --space-section-x: var(--space-sm);
  }
}

@media (max-width: 40rem) {
  :root {
    --space-section-y: var(--space-xl);
    --space-nav-to-main: var(--space-sm);
    --space-section-x: clamp(1rem, 6vw, 1.5rem);
  }
}

@media (max-width: 36rem) {
  :root {
    --space-section-y: clamp(var(--space-lg), 5vh, var(--space-2xl));
  }
}

@media (max-width: 30rem) {
  :root {
    --space-section-y: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}