/* ================================================================
   Keytos redesign — design tokens
   Values pulled from the Figma "Design System" variables.
   These are the single source of truth for the redesigned site;
   reference them via var(--…) — never hardcode raw hex/px.
   ================================================================ */
:root {
  /* ---- Brand / surface colors ---------------------------------- */
  --color-surface-card: #ffffff;
  --color-surface-canvas: #f7f9fb;
  --color-border-default: #dde3ea;

  --color-text-primary: #181d23;
  --color-text-secondary: #56616f;
  --color-text-brand: #0071a2;
  --color-text-button-fill: #f7f9fb;

  --color-btn-primary-default: #0071a2;
  --color-btn-primary-hover: #00577c;
  --color-btn-secondary-border-default: #56616f;
  --color-btn-secondary-border-selected: #0071a2;

  --color-info-background: #ebf5ff;
  --color-info-default: #00577c;
  --color-link-rest: #00577c;

  --color-error-default: #9e0a17;
  --color-error-background: #fee9e9;
  --color-success-default: #207f4f;
  /* Rating-star gold. Same value in both themes: it reads as a rating mark
     rather than as UI text, and G2/review stars are gold everywhere. */
  --color-star: #f5a500;
  --color-surface-raised: #ffffff;
  --color-text-disabled: #9aa6b4;

  --logo-blue: #27aae1;
  --logo-gray: #58595b;
  --color-blue-500: #0091ce;
  --color-surface-brand-subtle: #dde8f4;

  /* ---- Typography ---------------------------------------------- */
  --font-family-primary: "Ubuntu", system-ui, sans-serif;      /* headers */
  --font-family-secondary: "Inter", system-ui, sans-serif;     /* body / UI */
  --font-family-mono: "DM Mono", ui-monospace, monospace;      /* code / special */

  --font-size-b4: 14px;
  --font-size-b3: 16px;
  --font-size-b2: 18px;
  --font-size-b1: 20px;
  --font-size-h5: 20px;
  --font-size-h4: 24px;
  --font-size-h3: 30px;
  --font-size-h2: 36px;
  --font-size-h1: 48px;

  --line-height-b4: 19.6px;
  --line-height-b3: 22.4px;
  --line-height-b2: 25.2px;
  --line-height-b1: 28px;
  --line-height-l1: 19.6px;
  --line-height-h5: 26px;
  --line-height-h4: 31.2px;
  --line-height-h3: 39px;
  --line-height-h2: 46.8px;
  --line-height-h1: 62.4px;

  /* ---- Spacing scale ------------------------------------------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-120: 120px;

  /* ---- Radii --------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 10000px;

  /* ---- Elevation ----------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-dd: 0 2px 2px 0 rgba(0, 0, 0, 0.06);

  /* ---- Layout -------------------------------------------------- */
  --content-max: 1280px;
  --body-max: 800px;       /* body-text max-width for readability */
  --section-pad-x: 48px;   /* desktop section / footer horizontal padding — matches nav-pad-x */
  --hero-pad-y: 120px;     /* hero vertical padding */
  --section-pad-y: 96px;   /* normal section vertical padding */
  --section-pad-y-tight: 64px;
  --nav-pad-x: 48px;       /* desktop navbar horizontal padding */
  --nav-height: 72px;      /* desktop navbar height */
  --nav-height-tablet: 64px;
  --nav-height-mobile: 56px;

  /* ---- Anchor scroll offset ------------------------------------ */
  /* scroll-margin-top for a section that an in-page link targets.
     Two things the nav height alone does not cover:
       - the sticky bar has a 1px bottom border, so it occupies nav-height + 1
       - the browser aligns the element's BORDER BOX, but these sections open
         with a screenful of empty padding, so aligning the box top left the
         first line of text far below the bar (119px at 1440, 47px at 375)
     Subtracting the section's own padding-top lands that first line a
     consistent --space-48 below the bar at every width. That first line is
     usually a small eyebrow label, which sat too close to the bar at 24px.
     Sections using a different padding scale need their own value. */
  --anchor-offset: calc(var(--nav-height) + 1px + var(--space-48) - var(--section-pad-y));
  /* Same idea for a tight-padded target such as .kcta-section, whose padding
     runs 64/32/24 rather than 96/48/32. Reusing --anchor-offset there left the
     heading only 16px below the bar instead of --space-48. */
  --anchor-offset-tight: calc(var(--nav-height) + 1px + var(--space-48) - var(--section-pad-y-tight));

  /* ---- Breakpoints (for reference in comments) ----------------- */
  /* desktop >= 1200px | tablet 450-1199px | mobile < 450px */
}

/* Both the bar height and the section padding step down at these widths, so
   the offset is recomputed to match. Boundaries follow navbar.css. */
@media (min-width: 768px) and (max-width: 1072px) {
  :root {
    --anchor-offset: calc(var(--nav-height-tablet) + 1px + var(--space-48) - var(--space-48));
    --anchor-offset-tight: calc(var(--nav-height-tablet) + 1px + var(--space-48) - var(--space-32));
  }
}
@media (max-width: 767px) {
  :root {
    --anchor-offset: calc(var(--nav-height-mobile) + 1px + var(--space-48) - var(--space-32));
    --anchor-offset-tight: calc(var(--nav-height-mobile) + 1px + var(--space-48) - var(--space-24));
  }
}

/* ================================================================
   Dark theme scope — apply `theme-dark` to any section that renders
   on a dark surface (e.g. the footer). Overrides the semantic color
   tokens with their dark-mode values from Figma.
   ================================================================ */
.theme-dark {
  --color-surface-canvas: #0d1116;
  --color-surface-card: #181d23;
  --color-surface-brand-subtle: #001523;
  --color-border-default: #404954;
  --color-text-primary: #f7f9fb;
  --color-text-secondary: #9aa6b4;
  --color-text-brand: #0091ce;
  --color-btn-secondary-border-default: #9aa6b4;
  --color-info-background: #00577c;
}

/* ================================================================
   Responsive typography — same breakpoints as the navbar (1072px / 767px)
   so the whole page shifts together as one system.
   ================================================================ */

@media (max-width: 1072px) {
  :root {
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 26px;
    --font-size-h4: 22px;
    --font-size-h5: 18px;

    --line-height-h1: 52px;
    --line-height-h2: 41.6px;
    --line-height-h3: 33.8px;
    --line-height-h4: 28.6px;
    --line-height-h5: 23.4px;
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 16px;
    --font-size-b1: 18px;
    --font-size-b2: 16px;
    --font-size-b3: 14px;
    --font-size-b4: 12px;
    --line-height-l1: 16.8px;

    --line-height-h1: 41.6px;
    --line-height-h2: 36.4px;
    --line-height-h3: 31.2px;
    --line-height-h4: 26px;
    --line-height-h5: 20.8px;
    --line-height-b1: 25.2px;
    --line-height-b2: 22.4px;
    --line-height-b3: 19.6px;
    --line-height-b4: 16.8px;
  }
}