/* Global Design Tokens: typography, colors, radii, buttons */

:root {
  /* Font Families */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Text Colors */
  --color-text: #1F1F1F;
  --color-text-inverse: #FFFFFF;

  /* Brand */
  --color-brand-1: #6958ED;
  --color-brand-2: #EDCF4B;

  /* Buttons - shared across project (override per page/section if needed) */
  /* New unified button tokens */
  --btn-primary-bg: #1F1F1F;
  --btn-primary-color: #ffffff;
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: #404040;
  --btn-primary-hover-color: #ffffff;
  --btn-primary-hover-border: transparent;
  --btn-primary-hover-shadow: 0 6px 20px rgba(31, 31, 31, 0.25);
  --btn-primary-hover-transform: translateY(-2px);
  --btn-primary-focus-bg: #1F1F1F;
  --btn-primary-focus-color: #ffffff;
  --btn-primary-focus-border: transparent;
  --btn-primary-active-bg: #1F1F1F;
  --btn-primary-active-color: #ffffff;
  --btn-primary-active-border: transparent;

  --btn-secondary-bg: transparent;
  --btn-secondary-color: #1F1F1F;
  --btn-secondary-border: #1F1F1F;
  --btn-secondary-hover-bg: #ffffff;
  --btn-secondary-hover-color: #1F1F1F;
  --btn-secondary-hover-border: #ffffff;
  --btn-secondary-hover-shadow: 0 6px 20px rgba(31, 31, 31, 0.25);
  --btn-secondary-hover-transform: translateY(-1px);
  --btn-secondary-focus-bg: transparent;
  --btn-secondary-focus-color: #1F1F1F;
  --btn-secondary-focus-border: 1F1F1F;
  --btn-secondary-active-bg: transparent;
  --btn-secondary-active-color: #1F1F1F;
  --btn-secondary-active-border: #1F1F1F;

  /* Dark background button variants */
  --btn-primary-bg-dark: #ffffff;
  --btn-primary-color-dark: #1F1F1F;
  --btn-primary-border-dark: #ffffff;
  --btn-primary-hover-bg-dark: #f0f0f0;
  --btn-primary-hover-color-dark: #1F1F1F;
  --btn-primary-hover-border-dark: #f0f0f0;
  --btn-primary-hover-shadow-dark: 0 6px 20px rgba(255, 255, 255, 0.25);
  --btn-primary-hover-transform-dark: translateY(-2px);
  --btn-primary-focus-bg-dark: #ffffff;
  --btn-primary-focus-color-dark: #1F1F1F;
  --btn-primary-focus-border-dark: #ffffff;
  --btn-primary-active-bg-dark: #ffffff;
  --btn-primary-active-color-dark: #1F1F1F;
  --btn-primary-active-border-dark: #ffffff;

  --btn-secondary-bg-dark: transparent;
  --btn-secondary-color-dark: #ffffff;
  --btn-secondary-border-dark: #ffffff;
  --btn-secondary-hover-bg-dark: #ffffff2a;
  --btn-secondary-hover-color-dark: #ffffff;
  --btn-secondary-hover-border-dark: #ffffff;
  --btn-secondary-hover-shadow-dark: 0 6px 20px rgba(255, 255, 255, 0.2);
  --btn-secondary-hover-transform-dark: translateY(-1px);
  --btn-secondary-focus-bg-dark: transparent;
  --btn-secondary-focus-color-dark: #ffffff;
  --btn-secondary-focus-border-dark: #ffffff;
  --btn-secondary-active-bg-dark: transparent;
  --btn-secondary-active-color-dark: #ffffff;
  --btn-secondary-active-border-dark: #ffffff;

  --btn-outline-color: transparent;
  --btn-outline-hover-text: #FFFFFF;
  --btn-outline-bg: transparent;
  --btn-outline-hover-bg: auto; /* fallback handled in rule */
  --btn-hover-gradient-start: #1F1F1F;
  --btn-hover-gradient-end: #000000;
  --btn-hover-shadow: rgba(0, 0, 0, 0.18);
  --btn-hover-scale: 1.02;
  --btn-press-scale: 0.98;
  --btn-border-width: 1px;
  --btn-backdrop-filter: none;

  /* Solid button tokens */
  --btn-solid-bg: #1F1F1F;
  --btn-solid-text: #FFFFFF;
  --btn-solid-border: none;
  --btn-solid-hover-bg: #000000;
  --btn-solid-hover-text: #FFFFFF;

  /* Focus behavior - buttons stay in normal state */
  --btn-focus-outline: none;
  --btn-focus-outline-offset: 0;
  --btn-focus-box-shadow: none;
  --btn-focus-transform: none;
  --btn-focus-bg: inherit;
  --btn-focus-color: inherit;
  --btn-focus-border-color: inherit;

  /* Radii */
  --radius-pill: 50px;
  --radius-round: 999px;
  --radius-card: 16px;

  /* Layout */
  --container-max: 1400px;
}

/* Apply Roboto site-wide */
html, body {
  font-family: var(--font-sans);
}