/* ============================================================
   Techwine — Design tokens
   Teal/yellow duet ONLY: new tones must be tints/shades of these.
   ============================================================ */
:root {
  /* Core palette */
  --color-teal: #0A6062;        /* primary teal — large surfaces, header */
  --color-teal-dark: #003334;   /* near-black teal — footer, deep bg */
  --color-yellow: #F2D32C;      /* accent — CTAs, highlights, logo moments */
  --color-yellow-dark: #A48A00; /* olive gold — hover states, text-on-yellow */
  --color-off-white: #F6F6F6;   /* body text on dark, light backgrounds */
  --color-teal-muted: #7EA5A6;  /* sage teal — secondary elements, borders */
  --color-yellow-pale: #F6F0CD; /* cream — soft backgrounds, cards */

  /* Derived tints/shades (teal & yellow only) */
  --color-teal-light: #2A7A7C;
  --color-teal-pale: #DDEBEB;
  --color-teal-ghost: #EEF5F5;
  --color-yellow-light: #F7E27A;

  /* Semantic */
  --bg-page: var(--color-off-white);
  --text-dark: var(--color-teal-dark);
  --text-light: var(--color-off-white);
  --border-soft: var(--color-teal-pale);

  /* Typography */
  --font-main: 'Montserrat', 'Segoe UI', Arial, sans-serif;

  /* Radii — everything is rounded */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows (teal-tinted) */
  --shadow-card: 0 10px 30px rgba(0, 51, 52, 0.10);
  --shadow-card-hover: 0 18px 44px rgba(0, 51, 52, 0.18);
  --shadow-pop: 0 24px 70px rgba(0, 51, 52, 0.35);

  /* Layout */
  --container: 1200px;
  --header-h: 76px;

  /* Signature dot-grid textures */
  --dotgrid-dark: radial-gradient(rgba(246, 246, 246, 0.16) 2px, transparent 2.5px);
  --dotgrid-light: radial-gradient(rgba(10, 96, 98, 0.14) 2px, transparent 2.5px);
  --dotgrid-yellow: radial-gradient(rgba(242, 211, 44, 0.25) 2px, transparent 2.5px);
  --dotgrid-size: 26px 26px;
}