/*==============================================
    OTTO Laravel - Centralized Typography System
    All fonts, font sizes, font weights, and line heights
    Change typography here to update globally
===============================================*/

:root {
  /* ========================================
     FONT FAMILIES
     ======================================== */
  --otto-font-primary: "Plus Jakarta Sans", sans-serif;
  --otto-font-secondary: "Inter", sans-serif;
  --otto-font-icon: "Font Awesome 5 Pro";
  --otto-font-fallback: "Inter", sans-serif;

  /* Legacy support - mapping old variables to new */
  --techguru-font: var(--otto-font-primary);
  --techguru-font-two: var(--otto-font-secondary);

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

  /* ========================================
     FONT SIZES - Display & Headings
     ======================================== */
  --otto-font-size-display-xl: 60px;      /* Banner titles */
  --otto-font-size-display-lg: 50px;      /* Large display text */
  --otto-font-size-display-md: 40px;      /* Section titles */

  --otto-font-size-h1: 40px;
  --otto-font-size-h2: 36px;
  --otto-font-size-h3: 30px;
  --otto-font-size-h4: 24px;
  --otto-font-size-h5: 20px;
  --otto-font-size-h6: 18px;

  /* ========================================
     FONT SIZES - Body & Components
     ======================================== */
  --otto-font-size-base: 15px;            /* Default body text */
  --otto-font-size-lg: 20px;              /* Large body text */
  --otto-font-size-md: 16px;              /* Medium text */
  --otto-font-size-sm: 15px;              /* Small text */
  --otto-font-size-xs: 14px;              /* Extra small text */
  --otto-font-size-xxs: 12px;             /* Tiny text */
  --otto-font-size-xxxs: 11px;            /* Minimal text */

  /* ========================================
     LINE HEIGHTS
     ======================================== */
  /* Line heights as ratios */
  --otto-line-height-tight: 1.2;          /* Tight spacing */
  --otto-line-height-snug: 1.375;         /* Snug spacing */
  --otto-line-height-normal: 1.5;         /* Normal spacing */
  --otto-line-height-relaxed: 1.625;      /* Relaxed spacing */
  --otto-line-height-loose: 2;            /* Loose spacing */

  /* Fixed line heights for specific use cases */
  --otto-line-height-display: 1.2em;      /* Display text */
  --otto-line-height-heading: 1.25em;     /* Headings */
  --otto-line-height-body: 27px;          /* Body text - 18px base */
  --otto-line-height-small: 26px;         /* Small body - 16px */
  --otto-line-height-button: 16px;        /* Buttons */
  --otto-line-height-input: 30px;         /* Form inputs */

  /* ========================================
     LETTER SPACING
     ======================================== */
  --otto-letter-spacing-tight: -0.02em;
  --otto-letter-spacing-normal: 0;
  --otto-letter-spacing-wide: 0.02em;
  --otto-letter-spacing-wider: 0.05em;

  /* ========================================
     TEXT TRANSFORM
     ======================================== */
  --otto-text-uppercase: uppercase;
  --otto-text-lowercase: lowercase;
  --otto-text-capitalize: capitalize;
  --otto-text-normal: none;

  /* ========================================
     COMMON TYPOGRAPHY COMBINATIONS
     Use these for consistent styling
     ======================================== */

  /* Body Text Combinations */
  --otto-body-font: var(--otto-font-primary);
  --otto-body-size: var(--otto-font-size-base);
  --otto-body-weight: var(--otto-font-regular);
  --otto-body-line-height: var(--otto-line-height-body);

  /* Heading Combinations */
  --otto-heading-font: var(--otto-font-primary);
  --otto-heading-weight: var(--otto-font-bold);
  --otto-heading-line-height: var(--otto-line-height-heading);

  /* Button Text Combinations */
  --otto-button-font: var(--otto-font-primary);
  --otto-button-size: var(--otto-font-size-md);
  --otto-button-weight: var(--otto-font-medium);
  --otto-button-line-height: var(--otto-line-height-button);

  /* Input Text Combinations */
  --otto-input-font: var(--otto-font-primary);
  --otto-input-size: var(--otto-font-size-sm);
  --otto-input-weight: var(--otto-font-regular);
  --otto-input-line-height: var(--otto-line-height-input);

  /* Link Text Combinations */
  --otto-link-font: var(--otto-font-primary);
  --otto-link-size: var(--otto-font-size-base);
  --otto-link-weight: var(--otto-font-regular);

  /* Small Text Combinations */
  --otto-small-font: var(--otto-font-primary);
  --otto-small-size: var(--otto-font-size-xs);
  --otto-small-weight: var(--otto-font-regular);
  --otto-small-line-height: var(--otto-line-height-small);
}

/*==============================================
    RESPONSIVE TYPOGRAPHY
    Adjust font sizes for different screen sizes
===============================================*/

/* Large Desktop (1600px+) */
@media (min-width: 1600px) {
  :root {
    --otto-font-size-display-xl: 70px;
    --otto-font-size-display-lg: 60px;
    --otto-font-size-display-md: 48px;
    --otto-font-size-h1: 48px;
  }
}

/* Desktop (1200px - 1599px) - Default sizes apply */

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
  :root {
    --otto-font-size-display-xl: 50px;
    --otto-font-size-display-lg: 42px;
    --otto-font-size-display-md: 36px;
    --otto-font-size-h1: 36px;
    --otto-font-size-h2: 32px;
    --otto-font-size-h3: 28px;
    --otto-font-size-h4: 22px;
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  :root {
    --otto-font-size-display-xl: 40px;
    --otto-font-size-display-lg: 36px;
    --otto-font-size-display-md: 30px;
    --otto-font-size-h1: 32px;
    --otto-font-size-h2: 28px;
    --otto-font-size-h3: 24px;
    --otto-font-size-h4: 20px;
    --otto-font-size-h5: 18px;
    --otto-font-size-base: 16px;
    --otto-line-height-body: 24px;
  }
}

/* Small Mobile (< 576px) */
@media (max-width: 575px) {
  :root {
    --otto-font-size-display-xl: 32px;
    --otto-font-size-display-lg: 30px;
    --otto-font-size-display-md: 26px;
    --otto-font-size-h1: 28px;
    --otto-font-size-h2: 24px;
    --otto-font-size-h3: 22px;
    --otto-font-size-h4: 18px;
    --otto-font-size-base: 15px;
    --otto-line-height-body: 22px;
  }
}

/*==============================================
    UTILITY CLASSES
    Ready-to-use typography classes
===============================================*/

/* Font Family Utilities */
.font-primary { font-family: var(--otto-font-primary); }
.font-secondary { font-family: var(--otto-font-secondary); }

/* Font Size Utilities */
.text-display-xl { font-size: var(--otto-font-size-display-xl); }
.text-display-lg { font-size: var(--otto-font-size-display-lg); }
.text-display-md { font-size: var(--otto-font-size-display-md); }
.text-h1 { font-size: var(--otto-font-size-h1); }
.text-h2 { font-size: var(--otto-font-size-h2); }
.text-h3 { font-size: var(--otto-font-size-h3); }
.text-h4 { font-size: var(--otto-font-size-h4); }
.text-h5 { font-size: var(--otto-font-size-h5); }
.text-h6 { font-size: var(--otto-font-size-h6); }
.text-lg { font-size: var(--otto-font-size-lg); }
.text-base { font-size: var(--otto-font-size-base); }
.text-md { font-size: var(--otto-font-size-md); }
.text-sm { font-size: var(--otto-font-size-sm); }
.text-xs { font-size: var(--otto-font-size-xs); }
.text-xxs { font-size: var(--otto-font-size-xxs); }

/* Font Weight Utilities */
.font-light { font-weight: var(--otto-font-light); }
.font-regular { font-weight: var(--otto-font-regular); }
.font-medium { font-weight: var(--otto-font-medium); }
.font-semibold { font-weight: var(--otto-font-semibold); }
.font-bold { font-weight: var(--otto-font-bold); }
.font-extrabold { font-weight: var(--otto-font-extrabold); }

/* Line Height Utilities */
.leading-tight { line-height: var(--otto-line-height-tight); }
.leading-snug { line-height: var(--otto-line-height-snug); }
.leading-normal { line-height: var(--otto-line-height-normal); }
.leading-relaxed { line-height: var(--otto-line-height-relaxed); }
.leading-loose { line-height: var(--otto-line-height-loose); }

/* Text Transform Utilities */
.uppercase { text-transform: var(--otto-text-uppercase); }
.lowercase { text-transform: var(--otto-text-lowercase); }
.capitalize { text-transform: var(--otto-text-capitalize); }
.normal-case { text-transform: var(--otto-text-normal); }

/*==============================================
    USAGE EXAMPLES & NOTES
===============================================

1. For body text, use:
   font-family: var(--otto-body-font);
   font-size: var(--otto-body-size);
   line-height: var(--otto-body-line-height);

   OR simply:
   font: var(--otto-body-weight) var(--otto-body-size)/var(--otto-body-line-height) var(--otto-body-font);

2. For headings, use:
   font-family: var(--otto-heading-font);
   font-size: var(--otto-font-size-h1); /* or h2, h3, etc */
   font-weight: var(--otto-heading-weight);
   line-height: var(--otto-heading-line-height);

3. For buttons, use:
   font-family: var(--otto-button-font);
   font-size: var(--otto-button-size);
   font-weight: var(--otto-button-weight);
   line-height: var(--otto-button-line-height);

4. To change fonts globally:
   - Change --otto-font-primary for main font
   - Change --otto-font-secondary for accent/serif font

5. To adjust all sizes proportionally:
   - Update base size variables
   - Responsive breakpoints will adjust automatically

6. Font size responsive behavior:
   - All sizes automatically adjust for mobile
   - No need to write media queries for each element

===============================================*/