/*
 * ============================================================================
 * FHM — Brand Tokens (2026)
 * ============================================================================
 * Senior Art Direction system. Single source of truth for color, typography,
 * spacing rhythm, and motion timing. Imported by bs-theme.css.
 *
 * Brand spirit:  Apple minimalism · Stripe modernity · Linear precision
 * Sector:        FTTH · SIG / QGIS · AutoCAD · Telecom Engineering
 * ============================================================================
 */

:root {
    /* ───── Palette · Core ─────────────────────────────────────────────────
       Each color is given as HEX + RGB + CMYK reference for print parity.   */

    /* Midnight Navy — primary brand ink
       HEX  #0A1628    RGB  10  22  40    CMYK  90 75 45 70 */
    --fhm-midnight: #0A1628;
    --fhm-midnight-rgb: 10, 22, 40;

    /* Carbon — secondary surface (darker than midnight) for depth
       HEX  #050B17    RGB   5  11  23 */
    --fhm-carbon: #050B17;

    /* Electric Blue — interactive primary (CTAs, links, focus rings)
       HEX  #2563EB    RGB  37  99 235    CMYK  84 58  0  8 */
    --fhm-electric: #2563EB;
    --fhm-electric-rgb: 37, 99, 235;

    /* Cyan Signal — the brand "spark" (endpoint / accent / charts)
       HEX  #22D3EE    RGB  34 211 238    CMYK  72  0 16  0 */
    --fhm-cyan: #22D3EE;
    --fhm-cyan-rgb: 34, 211, 238;

    /* Graphite — body text on light, secondary borders on dark
       HEX  #475569    RGB  71  85 105    CMYK  72 56 36 16 */
    --fhm-graphite: #475569;

    /* Pure White
       HEX  #FFFFFF    RGB 255 255 255    CMYK   0  0  0  0 */
    --fhm-white: #FFFFFF;

    /* Off White — large surfaces (avoids harsh white on retina displays)
       HEX  #F8FAFC */
    --fhm-mist: #F8FAFC;

    /* ───── Palette · Functional ─────────────────────────────────────────── */
    --fhm-success: #10B981;
    --fhm-warning: #F59E0B;
    --fhm-danger:  #EF4444;
    --fhm-info:    #06B6D4;

    /* ───── Typography ────────────────────────────────────────────────────
       Primary  Inter         — UI, body, tables, forms
       Display  Sora          — H1/H2, hero, marketing
       Mono     JetBrains Mono — coordinates, IDs, technical data
       Loaded in includes/header.php via Google Fonts CSS                    */

    --fhm-font-display: 'Sora', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fhm-font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fhm-font-mono:    'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

    /* Type scale (modular, ratio 1.25 Major Third)                          */
    --fhm-text-xs:   .75rem;     /* 12 */
    --fhm-text-sm:   .875rem;    /* 14 */
    --fhm-text-base: 1rem;       /* 16 */
    --fhm-text-lg:   1.125rem;   /* 18 */
    --fhm-text-xl:   1.25rem;    /* 20 */
    --fhm-text-2xl:  1.5rem;     /* 24 */
    --fhm-text-3xl:  1.875rem;   /* 30 */
    --fhm-text-4xl:  2.25rem;    /* 36 */
    --fhm-text-5xl:  3rem;       /* 48 */

    /* Letter-spacing — display gets negative track, mono gets positive      */
    --fhm-track-tight:  -0.02em;
    --fhm-track-normal:  0;
    --fhm-track-wide:    0.04em;
    --fhm-track-mono:    0.02em;

    /* ───── Rhythm ────────────────────────────────────────────────────── */
    --fhm-radius-sm:   6px;
    --fhm-radius:      10px;
    --fhm-radius-lg:   14px;
    --fhm-radius-xl:   20px;

    /* ───── Motion ────────────────────────────────────────────────────── */
    --fhm-ease:       cubic-bezier(.16, 1, .3, 1);
    --fhm-ease-out:   cubic-bezier(.22, 1, .36, 1);
    --fhm-duration-fast: 120ms;
    --fhm-duration:      200ms;
    --fhm-duration-slow: 320ms;

    /* ───── Elevation ─────────────────────────────────────────────────── */
    --fhm-shadow-sm: 0 1px 2px rgba(10, 22, 40, .08);
    --fhm-shadow:    0 4px 12px rgba(10, 22, 40, .10), 0 1px 2px rgba(10, 22, 40, .06);
    --fhm-shadow-lg: 0 16px 40px rgba(10, 22, 40, .14), 0 4px 12px rgba(10, 22, 40, .08);
    --fhm-glow:      0 0 0 4px rgba(37, 99, 235, .18);
}

/* Apply primary type system globally (non-destructive — only sets the family) */
html { font-family: var(--fhm-font-sans); }
h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3,
.page-title, .card-title { font-family: var(--fhm-font-display); letter-spacing: var(--fhm-track-tight); }
code, kbd, samp, pre, .font-mono { font-family: var(--fhm-font-mono); letter-spacing: var(--fhm-track-mono); }
