/* ============================================
   TALOGY DESIGN SYSTEM — CSS Custom Properties
   ============================================ */

:root {
  /* ── Colors: Neutral ── */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-dark: #58595B;
  --color-gray-light: #CECECE;
  --color-gray-bg: #F2F2F3;
  --color-gray-text: #64748B;
  --color-dark-bg: #141414;
  --color-dark-card: #27272A;
  --color-dark-purple-bg: #2F0F50;
  --color-base: #090914;

  /* ── Colors: Primary ── */
  --color-green: #AAF857;
  --color-purple: #992FFF;
  --color-purple-dark: #7F06C3;
  --color-purple-darker: #622099;

  /* ── Colors: Secondary ── */
  --color-yellow: #FFC900;
  --color-purple-light: #D19AFF;

  /* ── Colors: Functional ── */
  --color-text-primary: var(--color-black);
  --color-text-secondary: rgba(0, 0, 0, 0.5);
  --color-text-light: #F6F6F6;
  --color-text-muted: #E4E4E4;
  --color-text-placeholder: rgba(0, 0, 0, 0.25);
  --color-overlay-light: rgba(0, 0, 0, 0.05);
  --color-overlay-medium: rgba(0, 0, 0, 0.3);
  --color-overlay-dark: rgba(0, 0, 0, 0.5);

  /* ── Typography ── */
  --font-primary: 'Barlow', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* H1 — Figma: Barlow SemiBold 54px/64px */
  --h1-size: 54px;
  --h1-weight: 600;
  --h1-line-height: 64px;
  --h1-letter-spacing: -0.5px;

  /* H2 */
  --h2-size: 40px;
  --h2-weight: 600;
  --h2-line-height: 48px;
  --h2-letter-spacing: -0.8px;

  /* H3 */
  --h3-size: 36px;
  --h3-weight: 600;
  --h3-line-height: 45px;
  --h3-letter-spacing: -0.5px;

  /* Body */
  --body-size: 18px;
  --body-weight: 500;
  --body-line-height: 28px;
  --body-letter-spacing: -0.36px;

  /* Small */
  --small-size: 16px;
  --small-weight: 500;
  --small-line-height: 28px;
  --small-letter-spacing: -0.32px;

  /* Caption */
  --caption-size: 14px;
  --caption-weight: 500;
  --caption-line-height: 24.5px;

  /* Label */
  --label-size: 12px;
  --label-weight: 500;
  --label-line-height: 20px;
  --label-letter-spacing: -0.1px;

  /* Card Title */
  --card-title-size: 24px;
  --card-title-weight: 700;
  --card-title-line-height: 32px;

  /* ── Spacing ── */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 60px;
  --space-4xl: 100px;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-pill: 166px;

  /* ── Shadows ── */
  --shadow-card: 0px 1px 2px 0px rgba(9, 25, 72, 0.13), 0px 0px 0px 1px rgba(18, 55, 105, 0.08);

  /* ── Layout ── */
  --container-max: 1440px;
  --content-padding: 120px;
  /* Dynamic edge padding: aligns full-width elements (navbar, footer) with centered 1440px grid */
  --edge-padding: max(var(--content-padding), calc((100vw - var(--container-max)) / 2 + var(--content-padding)));

  /* ── Transitions ── */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}