/*
 * File: css/base/variables.theme.css
 * Logic: Client token overrides — loaded immediately after master variables.css.
 * Rules: override only palette cores; scales (100–900) auto-resolve via color-mix.
 */

:root {
  /* Primary — brand surfaces, footer, titles */
  --color-primary-500: #1a365d;

  /* CTA — buttons, accents, focus states, CTA block */
  --color-accent-500: #3182ce;

  /* Secondary — links & interactive highlights */
  --link-header: #1a365d;
  --link-header-hover: color-mix(in srgb, #1a365d, black 15%);

  /* Buttons — pill shape, fade hover (overrides slide-fill in buttons.theme.css) */
  --btn-radius: var(--radius-pill);
  --btn-border-w: 2px;

  /* Accessible button surfaces — darker CTA shades for WCAG AA with white text */
  --btn-bg: #1a365d;
  --btn-text: #ffffff;
  --btn-border-color: #ffffff;
  --btn-hover-bg: #3182ce;

  /* Outline on light surfaces */
  --btn-outline-color: var(--color-primary-700);
  --btn-outline-border: var(--color-primary-700);
  --btn-outline-hover-bg: var(--color-primary-700);
  --btn-outline-hover-color: #ffffff;

  /* CTA block outline — white pill → primary fill on hover */
  --btn-cta-outline-color: var(--color-primary-500);
  --btn-cta-outline-border: #ffffff;
  --btn-cta-outline-bg: #ffffff;
  --btn-cta-outline-hover-bg: var(--color-primary-500);
  --btn-cta-outline-hover-color: #ffffff;

  /* Block h2 identity — restrained B2B, left-aligned vertical rule */
  --block-title-align: left;
  --block-title-size: clamp(1.375rem, 1vw + 1.125rem, 1.625rem);
  --block-title-weight: var(--font-weight-semibold);
  --block-title-color: var(--color-primary-500);
  --block-title-letter-spacing: -0.01em;
  --block-title-rule-width: 3px;
  --block-title-rule-gap: var(--space-md);
  --block-title-rule-color: var(--color-accent-500);
  --block-title-rule-color-on-dark: var(--text-on-hero);

  /* Section rhythm — vertical spacing between page blocks */
  --space-4xl: calc(var(--unit-base) * 20); /* 100px */
  --space-5xl: calc(var(--unit-base) * 24); /* 120px */
  --section-gap: var(--space-3xl);              /* 80px mobile */
  --content-area-padding-top: var(--space-md);  /* 20px inner pages */
  --content-area-padding-top-front: var(--space-sm); /* 15px after hero */
  --content-area-padding-bottom: var(--space-2xl); /* 60px mobile */
  --heading-gap: var(--space-xl);               /* title → block content */
}

@media (min-width: 768px) {
  :root {
    --section-gap: var(--space-4xl);               /* 100px tablet */
    --content-area-padding-top: var(--space-lg); /* 30px */
    --content-area-padding-top-front: var(--space-md);
    --content-area-padding-bottom: var(--space-3xl); /* 80px */
  }
}

@media (min-width: 1024px) {
  :root {
    --section-gap: var(--space-5xl);               /* 120px desktop */
    --content-area-padding-top: var(--space-lg); /* 30px — tight start */
    --content-area-padding-top-front: var(--space-md);
    --content-area-padding-bottom: var(--space-3xl); /* 80px */
  }
}