/**
 * OptionFinder Typography System
 *
 * Zentrale Schriftarten und Schriftgrößen für die gesamte Plattform.
 * Diese Datei wird VOR style.css geladen und definiert alle Typography-Variablen.
 *
 * @package OptionFinder
 * @since 1.0.0
 * @version 1.0.0
 *
 * VERWENDUNG:
 * - font-family: var(--of-font-sans);
 * - font-size: var(--of-font-size-base);
 * - font-weight: var(--of-font-weight-medium);
 * - line-height: var(--of-line-height-normal);
 */

/* ==========================================================================
   TYPOGRAPHY VARIABLES
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       FONT FAMILIES
       ------------------------------------------------------------------------- */

    /* System Font Stack - schnell, nativ, keine Downloads */
    --of-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

    /* Monospace für Code, Zahlen, Tabellen */
    --of-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
                    Consolas, "Courier New", monospace;

    /* Legacy-Alias (für Kompatibilität mit bestehenden Styles) */
    --of-font-family: var(--of-font-sans);


    /* -------------------------------------------------------------------------
       FONT SIZES - Basis
       ------------------------------------------------------------------------- */

    --of-font-size-xs: 0.75rem;      /* 12px */
    --of-font-size-sm: 0.875rem;     /* 14px */
    --of-font-size-base: 1rem;       /* 16px */
    --of-font-size-lg: 1.125rem;     /* 18px */
    --of-font-size-xl: 1.25rem;      /* 20px */
    --of-font-size-2xl: 1.5rem;      /* 24px */
    --of-font-size-3xl: 1.875rem;    /* 30px */
    --of-font-size-4xl: 2.25rem;     /* 36px */
    --of-font-size-5xl: 3rem;        /* 48px */
    --of-font-size-6xl: 3.75rem;     /* 60px */


    /* -------------------------------------------------------------------------
       FONT SIZES - Komponenten-spezifisch
       ------------------------------------------------------------------------- */

    /* Hero Section */
    --of-font-size-hero-title: 2rem;           /* 32px - Mobile */
    --of-font-size-hero-title-lg: 2.5rem;      /* 40px - Desktop */
    --of-font-size-hero-description: 1.125rem; /* 18px */

    /* KPI-Überschriften */
    --of-font-size-kpi-title: 1.5rem;          /* 24px */
    --of-font-size-kpi-subtitle: 0.9375rem;    /* 15px */

    /* KPI-Balken */
    --of-font-size-kpi-bar-title: 0.8125rem;   /* 13px - Titel links */
    --of-font-size-kpi-value: 1.875rem;        /* 30px - Zahlen rechts */
    --of-font-size-kpi-value-label: 1rem;      /* 16px - Labels rechts */
    --of-font-size-kpi-bar-label: 0.6875rem;   /* 11px - Labels im Balken */
    --of-font-size-kpi-bar-scale: 0.6875rem;   /* 11px - Skala unter Balken */

    /* Weitere Komponenten */
    --of-font-size-opportunity-title: 1.25rem; /* 20px */
    --of-font-size-context-chip: 0.75rem;      /* 12px */
    --of-font-size-badge: 0.875rem;            /* 14px */
    --of-font-size-last-update: 0.75rem;       /* 12px */

    /* Tabellen */
    --of-font-size-table-header: 0.75rem;      /* 12px */
    --of-font-size-table-cell: 0.8125rem;      /* 13px */
    --of-font-size-table-cell-lg: 0.875rem;    /* 14px */

    /* Navigation */
    --of-font-size-nav: 0.9375rem;             /* 15px */
    --of-font-size-nav-mobile: 1rem;           /* 16px */

    /* Buttons */
    --of-font-size-btn-sm: 0.8125rem;          /* 13px */
    --of-font-size-btn: 0.875rem;              /* 14px */
    --of-font-size-btn-lg: 1rem;               /* 16px */


    /* -------------------------------------------------------------------------
       FONT WEIGHTS
       ------------------------------------------------------------------------- */

    --of-font-weight-light: 300;
    --of-font-weight-normal: 400;
    --of-font-weight-medium: 500;
    --of-font-weight-semibold: 600;
    --of-font-weight-bold: 700;
    --of-font-weight-extrabold: 800;


    /* -------------------------------------------------------------------------
       LINE HEIGHTS
       ------------------------------------------------------------------------- */

    --of-line-height-none: 1;
    --of-line-height-tight: 1.25;
    --of-line-height-snug: 1.375;
    --of-line-height-normal: 1.5;
    --of-line-height-relaxed: 1.625;
    --of-line-height-loose: 2;

    /* Komponenten-spezifisch */
    --of-line-height-heading: 1.2;
    --of-line-height-body: 1.6;
    --of-line-height-table: 1.4;


    /* -------------------------------------------------------------------------
       LETTER SPACING
       ------------------------------------------------------------------------- */

    --of-letter-spacing-tighter: -0.05em;
    --of-letter-spacing-tight: -0.025em;
    --of-letter-spacing-normal: 0;
    --of-letter-spacing-wide: 0.025em;
    --of-letter-spacing-wider: 0.05em;
    --of-letter-spacing-widest: 0.1em;

    /* Komponenten-spezifisch */
    --of-letter-spacing-heading: -0.02em;
    --of-letter-spacing-uppercase: 0.05em;
}


/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

/* Font Families */
.of-font-sans { font-family: var(--of-font-sans) !important; }
.of-font-mono { font-family: var(--of-font-mono) !important; }

/* Font Sizes */
.of-text-xs   { font-size: var(--of-font-size-xs) !important; }
.of-text-sm   { font-size: var(--of-font-size-sm) !important; }
.of-text-base { font-size: var(--of-font-size-base) !important; }
.of-text-lg   { font-size: var(--of-font-size-lg) !important; }
.of-text-xl   { font-size: var(--of-font-size-xl) !important; }
.of-text-2xl  { font-size: var(--of-font-size-2xl) !important; }
.of-text-3xl  { font-size: var(--of-font-size-3xl) !important; }
.of-text-4xl  { font-size: var(--of-font-size-4xl) !important; }
.of-text-5xl  { font-size: var(--of-font-size-5xl) !important; }

/* Font Weights */
.of-font-light     { font-weight: var(--of-font-weight-light) !important; }
.of-font-normal    { font-weight: var(--of-font-weight-normal) !important; }
.of-font-medium    { font-weight: var(--of-font-weight-medium) !important; }
.of-font-semibold  { font-weight: var(--of-font-weight-semibold) !important; }
.of-font-bold      { font-weight: var(--of-font-weight-bold) !important; }
.of-font-extrabold { font-weight: var(--of-font-weight-extrabold) !important; }

/* Line Heights */
.of-leading-none    { line-height: var(--of-line-height-none) !important; }
.of-leading-tight   { line-height: var(--of-line-height-tight) !important; }
.of-leading-snug    { line-height: var(--of-line-height-snug) !important; }
.of-leading-normal  { line-height: var(--of-line-height-normal) !important; }
.of-leading-relaxed { line-height: var(--of-line-height-relaxed) !important; }
.of-leading-loose   { line-height: var(--of-line-height-loose) !important; }

/* Letter Spacing */
.of-tracking-tighter { letter-spacing: var(--of-letter-spacing-tighter) !important; }
.of-tracking-tight   { letter-spacing: var(--of-letter-spacing-tight) !important; }
.of-tracking-normal  { letter-spacing: var(--of-letter-spacing-normal) !important; }
.of-tracking-wide    { letter-spacing: var(--of-letter-spacing-wide) !important; }
.of-tracking-wider   { letter-spacing: var(--of-letter-spacing-wider) !important; }
.of-tracking-widest  { letter-spacing: var(--of-letter-spacing-widest) !important; }