/*
  Design tokens — extracted from the live dadubee.com production bundle
  (colors/spacing/type-scale reverse-engineered from /assets/index-*.css
  and /assets/index-*.js). Keep this file as the single source of truth
  for brand values; everything else should reference these variables.
*/
:root {
  /* Brand palette */
  --color-dark: #0D1117;          /* near-black navy — text, header/footer bg on dark sections */
  --color-yellow: #FFC107;        /* primary brand amber ("bee") */
  --color-yellow-dim: #E6AC06;    /* hover/active state for amber surfaces */
  --color-white: #FFFFFF;
  --color-warm: #F8F7F4;          /* warm off-white section background */
  --color-green: #6E8B3D;         /* olive accent (used sparingly) */
  --color-text-muted: #6B6866;    /* secondary/body copy on light bg */
  --color-border: #E5E3DF;        /* hairline borders on light bg */
  --color-border-dark: rgba(255, 255, 255, 0.1); /* hairline borders on dark bg */
  --color-danger: #B3261E;

  /* Type */
  --font-sans: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --tracking-tight-lg: -0.05em;
  --tracking-tight-md: -0.04em;
  --tracking-tight-sm: -0.02em;
  --tracking-wide-eyebrow: 0.18em;
  --tracking-wide-button: 0.04em;
  --tracking-wide-nav: 0.05em;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 60px);
  --section-pad: clamp(72px, 10vw, 120px);
  --header-height: 68px;
  --radius: 0px; /* dadubee is sharp-cornered by default */
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}