/* Brand tokens — three65.ai
   Source: th365 Brand Sheet
   All visual values flow from these variables. */

/* Font loaded via <link> in index.html for faster rendering */

:root {
  /* Colors — five core + utilities */
  --color-carbon: #2D2926;
  --color-blue-radiance: #009CDE;
  --color-flamingo: #E8788A;
  --color-carbon-dark: #1E1C1A;
  --color-skywriting: #8ABAD3;
  --color-pale-peach: #F9DCC4;
  --color-bg: #FDF8F4;
  --color-white: #FFFFFF;

  /* Semantic aliases */
  --color-text-primary: var(--color-carbon-dark);
  --color-text-secondary: var(--color-skywriting);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.6);
  --color-accent: var(--color-flamingo);
  --color-link: var(--color-blue-radiance);

  /* Typography */
  --font-family: 'Inter Tight', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Fluid type scale */
  --text-xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);
  --text-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --text-lg: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --text-stat: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);

  /* Spacing */
  --section-padding: clamp(4rem, 8vw, 8rem);
  --container-max: 1200px;
  --container-padding: clamp(1.25rem, 3vw, 2rem);
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-glow-blue: 0 0 20px rgba(0, 156, 222, 0.2);

  /* Z-index scale */
  --z-nav: 100;
  --z-mobile-menu: 90;
  --z-overlay: 80;
}