/* ============================================
   RENATUS TYPOGRAPHY TOKENS
   Based on Figma Design System 2026

   FIGMA TYPE SCALE:
   DH 01: 83px Bold (Hero display)
   DH 02: 65px Bold (Section headings)
   DP 01: 30px Regular (Hero body)
   DP 02: 26px Regular, line-height 40px (Section body)
   DP 06: 20px Regular, line-height 30px (List items)
   DB 01: 16.9px Semi Bold (Tab active)
   DB 01a: 16.9px Regular (Tab inactive)
   DB 03: 22px Semi Bold, letter-spacing -0.1px (CTA buttons)
   DB 03a: 22px Regular, letter-spacing -0.95px (Secondary buttons)
   ============================================ */

:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-base: var(--font-family);
  --font-family-heading: var(--font-family);

  /* ============================================
     FIGMA SIZE SCALE
     ============================================ */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-nav: 1.056rem;     /* 16.9px - Figma nav/tab size */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.25rem;       /* 20px */
  --text-2xl: 1.375rem;     /* 22px - Figma CTA button */
  --text-price-sub: 1.1875rem; /* 19px - Figma price subtitle */
  --text-3xl: 1.625rem;     /* 26px - Figma body large */
  --text-stripe: 1.5625rem; /* 25px - Figma stripe section DB 02 */
  --text-4xl: 1.875rem;     /* 30px */
  --text-5xl: 2.25rem;      /* 36px */
  --text-price: 3.8125rem;  /* 61px - Figma DH 04 price display */
  --text-6xl: 3rem;         /* 48px */
  --text-7xl: 4.0625rem;    /* 65px - Figma section heading */
  --text-8xl: 5.1875rem;    /* 83px - Figma hero display */

  /* ============================================
     LEGACY REM SCALE (for backwards compat)
     ============================================ */
  --font-size-2xs: 0.6875rem;  /* 11px */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 1.875rem;   /* 30px */
  --font-size-3xl: 2.25rem;    /* 36px */
  --font-size-4xl: 3rem;       /* 48px */

  /* ============================================
     SEMANTIC TYPOGRAPHY TOKENS
     ============================================ */
  --display: var(--text-8xl);        /* 83px - Hero display */
  --display-sm: var(--text-7xl);     /* 65px - Section headings */
  --title-1: var(--text-5xl);        /* 36px - Page titles */
  --title-2: var(--font-size-xl);    /* 24px - Section headers */
  --title-3: var(--text-xl);         /* 20px - Card titles */
  --title-4: var(--text-lg);         /* 18px - Subsection headers */
  --body-1: var(--text-base);        /* 16px - Main body text */
  --body-2: var(--text-sm);          /* 14px - Secondary body */
  --body-large: var(--text-3xl);     /* 26px - Figma body large */
  --caption: 0.8125rem;              /* 13px - Labels */
  --overline: var(--text-xs);        /* 12px - Category tags */

  /* ============================================
     FONT WEIGHTS
     ============================================ */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ============================================
     LINE HEIGHTS
     ============================================ */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.75;

  --lh-display: 1.05;       /* 83px heading */
  --lh-heading: 1.077;      /* 65px: 70px line-height */
  --lh-price: 1.393;        /* 61px: 85px line-height */
  --lh-price-sub: 1.684;    /* 19px: 32px line-height */
  --lh-stripe: 1.56;        /* 25px: 39px line-height */
  --lh-body-large: 1.538;   /* 26px: 40px line-height */
  --lh-body: 1.6;           /* 16px body */
  --lh-cta: 1.364;          /* 22px: 30px line-height */
  --lh-list: 1.5;           /* 20px: 30px line-height */
  --lh-nav: 1.42;           /* 16.9px: 24px line-height */

  /* ============================================
     LETTER SPACING
     ============================================ */
  --letter-spacing-tight: -0.03em;
  --letter-spacing-snug: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --ls-cta: -0.1px;         /* Figma CTA button */
  --ls-secondary-cta: -0.95px;  /* Figma secondary button */

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;
  --anim-duration-fast: 300ms;
  --anim-offset-sm: 6px;
  --anim-offset-md: 8px;

  /* ============================================
     LAYOUT
     ============================================ */
  --content-max-width: 1425px;
  --content-padding: 140px;
  --topbar-height: 72px;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
}

.text-2xs { font-size: var(--font-size-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-lg); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* ============================================
   BASE INPUT STYLES
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  color: var(--text-primary);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: var(--gray-500);
  font-weight: var(--font-weight-light);
}

.input-wrapper {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  box-shadow: var(--shadow-input);
  transition: box-shadow 0.2s ease;
}

.input-wrapper:focus-within {
  box-shadow: var(--shadow-input-focus);
}