/*
  ENLC -- tokens.css
  Verbatim drop-in from 1) Design System/colors_and_type.css (website-design-system, harness-website-rebuild plugin).
  Semantic role custom properties + base component classes. Reference these vars/classes, never raw hex.
  In Duda itself: load Barlow Condensed / Barlow via the native Google Fonts picker (Site Theme ->
  Fonts), not this @import -- see 1) Design System/duda-honor-map.md. The @import below is for this
  wireframe preview only.
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Barlow:wght@400;500;600&display=swap');

:root {
  /* Brand primitives (reference only -- components use semantic roles below) */
  --brand-primary: #015134;
  --brand-secondary: #007CBA;
  --brand-accent: #D2E4D0;

  /* Semantic color roles */
  --color-surface: #F8F9F9;
  --color-surface-raised: #EFF1F0;
  --color-on-surface: #1E2220;
  --color-text: #303634;
  --color-text-muted: #606C68;
  --color-divider: #DCE0DE; /* decorative hairlines only */
  --color-border: #788782;
  --color-border-strong: #606C68;

  --color-primary: #015134;
  --color-on-primary: #FFFCF5;
  --color-primary-hover: #013D27;
  --color-primary-active: #012E1D;

  --color-accent: #D2E4D0;
  --color-on-accent: #1E2220;

  --color-secondary: #007CBA; /* large-text/graphical/icon/large-CTA use ONLY -- not for body-size text */
  --color-link: #0075B0;
  --color-link-on-accent: #00619B;
  --color-focus-ring: #0075B0;
  --color-focus-ring-on-dark: #FFFCF5;

  /* Small/normal-weight CTA button variant -- design-enhancement fix (5) Enhancement Pass/03-design-handoff.md:
     --color-secondary at #FFFCF5 text computes to 4.46:1, below the 4.5:1 AA text minimum. --color-secondary
     itself is left unchanged (still valid for its documented large-text/graphical/icon use at 3:1); this is a
     new, separate token for the normal-weight small-button case. */
  --color-cta-accent: #006B9F;        /* #FFFCF5 on this = 5.69:1, PASS AA text */
  --color-cta-accent-hover: #005E8A;  /* -4% lightness, matches the --color-primary-hover step pattern */

  --color-success: #2E7D32;    --color-on-success: #FFFCF5;
  --color-warning: #A34A08;    --color-on-warning: #FFFCF5;
  --color-error: #B91C1C;      --color-on-error: #FFFCF5;
  --color-info: #0075B0;       --color-on-info: #FFFCF5;

  /* Flag-surface tokens -- were hardcoded hex in styles.css .internal-flag; promoted here per
     5) Enhancement Pass/03-design-handoff.md token-changes table */
  --color-warning-surface: #FCEFE0;
  --color-error-surface: #FBE9E9;

  /* Disabled-state tokens -- were hardcoded hex (neutral.300/neutral.400 primitives) across
     .btn-primary:disabled, .btn-secondary:disabled, .input:disabled; promoted here per the same table */
  --color-disabled-bg: #BEC5C3;
  --color-disabled-text: #98A4A0;
  --color-disabled-border: #BEC5C3;

  /* Color-usage overhaul (session 12, 2026-07-15) -- de-emphasized text/nontext-divider
     role for full-bleed primary-colored bands (footer fine print, stat-band dividers).
     Reuses neutral.300; no new hex. PASS 5.37:1 text and nontext on primary. */
  --color-on-primary-muted: #BEC5C3;

  /* Typography */
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-h1: 2.5rem;    --lh-h1: 1.15;
  --fs-h2: 2rem;      --lh-h2: 1.2;
  --fs-h3: 1.5rem;    --lh-h3: 1.25;
  --fs-h4: 1.25rem;   --lh-h4: 1.3;
  --fs-body: 1rem;    --lh-body: 1.5;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem; --lh-caption: 1.4;

  --fw-heading-bold: 700;
  --fw-heading-semibold: 600;
  --fw-body-regular: 400;
  --fw-caption: 500;

  /* Spacing (8px base -- Balanced) */
  --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px;
  --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px;

  /* Radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;

  /* Breakpoints (reference -- used in media queries below as literal values) */
  --content-max: 1200px;

  /* Elevation (brand-tinted) */
  --shadow-1: 0 1px 2px rgba(30,34,32,.06);
  --shadow-2: 0 4px 12px rgba(30,34,32,.08);
  --shadow-3: 0 12px 32px rgba(30,34,32,.12);

  /* Motion -- subtle only, per guardrail */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-easing: cubic-bezier(.2,.7,.2,1);
}

/* Base */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body-regular);
  background: var(--color-surface);
  color: var(--color-text);
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-on-surface);
  margin: 0 0 var(--space-sm);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-heading-bold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-heading-bold); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-heading-semibold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-heading-semibold); }

small, .fs-small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); color: var(--color-text-muted); }
.text-muted { color: var(--color-text-muted); }

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
p a { text-decoration: underline; } /* inline body links: always underlined for accessibility */

.on-accent a, .bg-accent a { color: var(--color-link-on-accent); }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.bg-primary :focus-visible, .on-primary-bg :focus-visible {
  outline-color: var(--color-focus-ring-on-dark);
}

/* Surfaces */
.bg-surface { background: var(--color-surface); color: var(--color-text); }
.bg-surface-raised { background: var(--color-surface-raised); color: var(--color-text); }
.bg-primary { background: var(--color-primary); color: var(--color-on-primary); }
.bg-accent { background: var(--color-accent); color: var(--color-on-accent); }
/* h1-h4 hardcode --color-on-surface below, which would otherwise override the
   inherited on-dark color on a full-bleed primary band (color-usage overhaul,
   session 12) -- explicit reset so headings inside a bg-primary section stay
   legible (9.20:1). */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4 { color: var(--color-on-primary); }

.divider { border: none; border-top: 1px solid var(--color-divider); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* touch target floor -- older/rural audience guardrail */
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--fw-heading-semibold);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color var(--motion-base) var(--motion-easing),
              border-color var(--motion-base) var(--motion-easing),
              transform var(--motion-fast) var(--motion-easing);
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }
.btn-primary:disabled { background: var(--color-disabled-bg); color: var(--color-text-muted); cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-accent); }
.btn-secondary:disabled { border-color: var(--color-disabled-border); color: var(--color-disabled-text); }

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
}
.btn-ghost:hover { background: var(--color-surface-raised); }

/* Large-CTA secondary-blue variant -- normal-weight small-button use fixed to --color-cta-accent
   (5.69:1 AA text pass); large/graphical uses may still reference --color-secondary directly at 3:1. */
.btn-accent-cta {
  background: var(--color-cta-accent);
  color: var(--color-on-primary);
}
.btn-accent-cta:hover { background: var(--color-cta-accent-hover); }

/* Card */
.card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.card--hoverable {
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--motion-base) var(--motion-easing),
              transform var(--motion-base) var(--motion-easing);
}
.card--hoverable:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.bg-accent .card, .bg-accent .divider { border-color: var(--color-border-strong); } /* accent bg needs the darker border variant */

/* Form input */
.input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-sm);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus { border-color: var(--color-border-strong); outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.input--error { border-color: var(--color-error); }
.input:disabled { background: var(--color-surface-raised); color: var(--color-disabled-text); border-color: var(--color-divider); }

/* Hero scrim (text-over-photo) */
.hero-scrim {
  background: linear-gradient(rgba(1,81,52,.65), rgba(1,81,52,.55));
  color: var(--color-on-primary);
}

/* Reduced motion -- hard gate on all animation/transition per the "subtle motion only" guardrail */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Breakpoints (reference values -- mobile-first) */
@media (min-width: 768px) { .container { max-width: 720px; margin: 0 auto; } }
@media (min-width: 1025px) { .container { max-width: var(--content-max); } }