/* ==========================================================================
   tokens.css: Indy Concrete Pros (Direction 1: Slate & Ochre)
   The ONLY file containing raw color values. Brand values mirror client.json.
   Section CSS consumes the semantic tokens, never the raw/brand tokens.
   ========================================================================== */
:root {
  /* Brand palette (client.json brand.colors) */
  --brand-primary: #1F3A4D;
  --brand-secondary: #5B6670;
  --brand-accent: #B45309;
  --brand-neutral-dark: #1A1D21;
  --brand-neutral-light: #F4F2EE;

  /* Functional raw values (not brand colors) */
  --raw-white: #FFFFFF;
  --raw-accent-hover: #8F4207;
  --raw-error: #A3261B;
  --raw-error-tint: #FBEDEB;
  --raw-success: #2F6B3A;
  --raw-success-tint: #EAF3EC;
  --raw-placeholder: #C9CCCF;
  --raw-divider: rgba(91, 102, 112, 0.28);
  --raw-divider-inverse: rgba(244, 242, 238, 0.24);
  --raw-overlay-strong: rgba(26, 29, 33, 0.82);
  --raw-overlay-clear: rgba(26, 29, 33, 0);
  --raw-shadow: rgba(26, 29, 33, 0.14);

  /* Semantic: surfaces (60% neutral-light / 30% primary+secondary / 10% accent) */
  --color-bg: var(--brand-neutral-light);
  --color-surface: var(--raw-white);
  --color-surface-inverse: var(--brand-primary);
  --color-surface-deep: var(--brand-neutral-dark);
  --color-placeholder: var(--raw-placeholder);
  --color-divider: var(--raw-divider);
  --color-divider-inverse: var(--raw-divider-inverse);
  --color-overlay-strong: var(--raw-overlay-strong);
  --color-overlay-clear: var(--raw-overlay-clear);
  --shadow: 0 8px 24px var(--raw-shadow);
  --shadow-up: 0 -4px 16px var(--raw-shadow);

  /* Semantic: text (ratios: WCAG 2.x) */
  --color-text: var(--brand-neutral-dark);          /* 15.1:1 on bg · 16.9:1 on surface */
  --color-text-muted: var(--brand-secondary);       /* 5.3:1 on bg · 5.9:1 on surface */
  --color-heading: var(--brand-primary);            /* 10.6:1 on bg · 11.9:1 on surface */
  --color-text-inverse: var(--brand-neutral-light); /* 10.6:1 on primary · 15.1:1 on neutral-dark */
  --color-link: var(--brand-primary);

  /* Semantic: actions */
  --color-cta-bg: var(--brand-accent);              /* accent: primary conversion buttons ONLY */
  --color-cta-bg-hover: var(--raw-accent-hover);
  --color-cta-text: var(--raw-white);               /* 5.0:1 on accent · 7.1:1 on hover */
  --color-btn2-text: var(--brand-primary);          /* secondary (Funnel B) style */
  --color-btn2-border: var(--brand-primary);
  --color-btn2-hover-bg: var(--brand-primary);
  --color-btn2-hover-text: var(--raw-white);        /* 11.9:1 */
  --color-on-primary: var(--raw-white);             /* 11.9:1 */
  --color-disabled-bg: var(--brand-secondary);
  --color-disabled-text: var(--raw-white);          /* 5.9:1 */
  --color-input-border: var(--brand-secondary);     /* 5.9:1 vs surface (non-text >= 3:1) */

  /* Semantic: feedback and focus */
  --color-error: var(--raw-error);                  /* 7.4:1 on surface · 6.5:1 on tint */
  --color-error-bg: var(--raw-error-tint);
  --color-success: var(--raw-success);              /* 6.4:1 on surface · 5.6:1 on tint */
  --color-success-bg: var(--raw-success-tint);
  --color-focus: var(--brand-primary);
  --color-focus-inverse: var(--brand-neutral-light);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);

  /* Space, shape, layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
  --container: 72rem;
  --mobile-bar-h: 64px;
}