/*
 * UEC design tokens
 *
 * Variables extracted from UEC_Website_Full_design.html and normalized for
 * Bricks classes. Fonts are not loaded here; assign them in Bricks or enqueue
 * local font files later if the project needs them.
 */

:root {
  /* Brand colors */
  --uec-green-400: #2da965;
  --uec-green-500: #1b8a4e;
  --uec-green-600: #14693a;
  --uec-green-700: #0f5530;
  --uec-green-800: #0a3d22;
  --uec-green-900: #062917;

  /* Dark scale */
  --uec-black: #09090b;
  --uec-dark-950: #0c0c0e;
  --uec-dark-900: #111113;
  --uec-dark-800: #18181b;
  --uec-dark-700: #1f1f23;
  --uec-dark-600: #27272a;
  --uec-dark-500: #3f3f46;
  --uec-dark-400: #52525b;
  --uec-dark-300: #71717a;
  --uec-dark-200: #a1a1aa;
  --uec-dark-100: #d4d4d8;

  /* Light scale */
  --uec-white-soft: #fafafa;
  --uec-white: #ffffff;
  --uec-light-100: #f5f5f3;
  --uec-light-200: #ebebea;
  --uec-light-300: #ddddd9;

  /* Functional aliases */
  --color-text: var(--uec-white-soft);
  --color-text-muted: var(--uec-dark-200);
  --color-background: var(--uec-black);
  --color-surface: var(--uec-dark-800);
  --color-border: rgb(255 255 255 / 8%);
  --color-primary: var(--uec-green-500);
  --color-primary-contrast: var(--uec-white);
  --color-accent: var(--uec-green-400);

  /* Typography */
  --font-family-base: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-heading: "Fjalla One", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-size-base: 1.0625rem;
  --line-height-base: 1.6;
  --letter-spacing-label: 0.03125rem;
  --letter-spacing-wide: 0.09375rem;
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;
  --text-4xl: 3.25rem;
  --text-5xl: 4.25rem;
  --text-hero: clamp(3.75rem, 7vw, 6.5rem);

  /* Radii */
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 8%);
  --shadow-md: 0 16px 48px rgb(0 0 0 / 20%);
  --shadow-lg: 0 20px 60px rgb(0 0 0 / 30%);
  --shadow-green: 0 8px 32px rgb(27 138 78 / 45%);

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 0.875rem;
  --space-md: 1.25rem;
  --space-lg: 1.75rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.25rem;
  --space-3xl: 4.5rem;
  --space-4xl: 5.75rem;

  /* Layout */
  --container-width: 1440px;
  --container-padding: clamp(1.5rem, 5vw, 5.5rem);
  --section-padding: clamp(4rem, 7vw, 6rem);

  /* Component scale */
  --uec-nav-font-size: var(--text-sm);
  --uec-nav-min-height: 2.625rem;
  --uec-nav-padding-y: 0.625rem;
  --uec-nav-padding-x: 1.25rem;
  --uec-button-font-size: var(--text-sm);
  --uec-button-small-font-size: 0.875rem;
  --uec-button-min-height: 3.625rem;
  --uec-button-small-min-height: 2.875rem;
  --uec-card-title-size: 1.25rem;
  --uec-card-feature-title-size: 2rem;
  --uec-card-meta-size: 0.9375rem;
  --uec-label-size: 0.8125rem;
  --site-header-height: 5.75rem;
  --site-header-offset: 0.75rem;
  --glass-dark: rgb(9 9 11 / 91%);
  --glass-border: rgb(255 255 255 / 10%);

  /* Motion */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 180ms var(--ease-standard);
  --transition-base: 300ms var(--ease-standard);
  --transition-slow: 500ms var(--ease-emphasized);
}