/* SEO Factory Design Core — default tokens.
   Contract: docs/design/THEME_CONTRACT.md §2. Themes override VALUES only.
   Default values intentionally reproduce the existing evidence-preview look. */

:root {
  /* color — semantic roles */
  --ds-color-bg: #f5f7fb;
  --ds-color-surface: #ffffff;
  --ds-color-raised: #ffffff;
  --ds-color-sunken: #eef1f7;
  --ds-color-text: #172033;
  --ds-color-text-muted: #52607a;
  --ds-color-text-inverted: #ffffff;
  --ds-color-border: #dbe2ef;
  --ds-color-border-strong: #b9c4d9;
  --ds-color-accent: #1957c2;
  --ds-color-accent-hover: #1446a0;
  --ds-color-accent-soft: #e4edfb;
  --ds-color-success: #1f7a3d;
  --ds-color-warning: #9a6700;
  --ds-color-danger: #b42318;
  --ds-color-focus: #1957c2;

  /* typography */
  --ds-font-sans: system-ui, sans-serif;
  --ds-font-heading: system-ui, sans-serif;
  --ds-font-mono: ui-monospace, monospace;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.25rem;
  --ds-text-2xl: 1.5rem;
  --ds-text-3xl: 1.875rem;
  --ds-text-4xl: 2.25rem;
  --ds-leading-tight: 1.2;
  --ds-leading-normal: 1.55;
  --ds-leading-loose: 1.75;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-bold: 700;
  --ds-tracking-tight: -0.01em;
  --ds-tracking-normal: 0;

  /* spacing & layout */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-7: 3rem;
  --ds-space-8: 4rem;
  --ds-container-max: 72rem;
  --ds-container-narrow: 42rem;
  --ds-container-gutter: var(--ds-space-5);
  --ds-section-gap: var(--ds-space-5);

  /* elevation & shape */
  --ds-radius-sm: 0.375rem;
  --ds-radius-md: 0.625rem;
  --ds-radius-lg: 1rem;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 1px 2px rgb(23 32 51 / 0.06);
  --ds-shadow-md: 0 4px 12px rgb(23 32 51 / 0.1);
  --ds-shadow-lg: 0 12px 32px rgb(23 32 51 / 0.14);
  --ds-border-width: 1px;

  /* motion & focus */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-duration-slow: 400ms;
  --ds-ease-standard: ease-out;
  --ds-focus-ring-width: 3px;
  --ds-focus-ring-offset: 2px;
}

/* Breakpoints are fixed Core constants (custom properties cannot be used
   in media queries): sm 36em · md 48em · lg 64em · xl 80em. Themes must
   not redefine them. See THEME_CONTRACT.md §3.2. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0ms;
    --ds-duration-base: 0ms;
    --ds-duration-slow: 0ms;
  }
}

/* Shared interaction foundation; page-specific theme selectors remain authoritative.
   Loaded before their stylesheets. No text, routes or factual claims live here. */
body[data-design-kit="published-portfolio-v1"] :where(nav a, summary, button, input:not([type="checkbox"]):not([type="radio"]), select) {
  min-block-size: 44px;
}
body[data-design-kit="published-portfolio-v1"] :where(nav a, summary) {
  display: inline-flex;
  align-items: center;
}
body[data-design-kit="published-portfolio-v1"] :where(input, select, textarea, button, summary, a):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
body[data-design-kit="published-portfolio-v1"] :where(h1, h2, h3, [id]) {
  scroll-margin-block-start: 6rem;
}
/* Specificity intentionally beats historical 36px in-page navigation pills. */
body[data-design-kit="published-portfolio-v1"] [data-ds-component="navigation"] a {
  min-block-size: 44px;
  min-inline-size: 44px;
}
@media (max-width: 767px) {
  body[data-design-kit="published-portfolio-v1"] .sf-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }
  body[data-design-kit="published-portfolio-v1"] .sf-head .sf-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 1.3;
  }
  body[data-design-kit="published-portfolio-v1"] .sf-head .sf-phone {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    white-space: nowrap;
  }
  body[data-design-kit="published-portfolio-v1"] .sf-head nav {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    gap: 4px 8px;
    justify-content: space-between;
  }
  body[data-design-kit="published-portfolio-v1"] .sf-head nav > a,
  body[data-design-kit="published-portfolio-v1"] .sf-head summary {
    font-size: clamp(12px, 3.5vw, 14px);
  }
}