/* Total Epoxy Care — canonical design tokens shared by React and static HTML.
 * Keep the source values here; React's Tailwind @theme inline in client/src/index.css
 * references them, and static pages may load this file before static-pages.css.
 */
:root {
  --tec-brand-orange: oklch(0.65 0.19 41);
  --tec-brand-orange-bright: oklch(0.7 0.21 41);
  --tec-brand-cream: oklch(0.96 0.01 80);
  --tec-brand-charcoal: oklch(0.2 0.005 50);
  --tec-brand-deep: oklch(0.13 0.005 50);
  --tec-brand-green-grey: oklch(0.35 0.025 150);
  --tec-font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --tec-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --tec-font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
  --tec-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --tec-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --tec-content-max: 1360px;
  /* Tailwind .container resolves to these at xl/2xl in the built homepage. */
  --tec-content-max-xl: 1280px;
  --tec-content-max-2xl: 1536px;
  --tec-gutter-mobile: 1.25rem;
  --tec-gutter-tablet: 2rem;
  --tec-gutter-desktop: 2.5rem;

  /* Public CSS names already used by the React homepage. */
  --color-brand-orange: var(--tec-brand-orange);
  --color-brand-orange-bright: var(--tec-brand-orange-bright);
  --color-brand-cream: var(--tec-brand-cream);
  --color-brand-charcoal: var(--tec-brand-charcoal);
  --color-brand-deep: var(--tec-brand-deep);
  --color-brand-green-grey: var(--tec-brand-green-grey);
  --font-display: var(--tec-font-display);
  --font-body: var(--tec-font-body);
  --font-mono: var(--tec-font-mono);
  --ease-out: var(--tec-ease-out);
  --ease-in-out: var(--tec-ease-in-out);
}