/*
Theme Name: cpubyte.com
Theme URI: https://www.cpubyte.com
Author: cpubyte.com
Description: A modern, high-performance special-purpose UI theme. UI typography: Outfit (body) + Playfair Display (headings). UI color system: primary #133E69, dark #080E17, card #0B2540, text #0b1b2b.
Version: 1.1.0
Text Domain: cpubyte
*/

/* ============================================================
   CPUBYTE.COM UI DESIGN SYSTEM
   Typography + UI colors carried by the theme itself.
   Fonts are loaded in header.php (Google Fonts) and wired into
   the Tailwind config (sans: Outfit, serif: Playfair Display).
   These tokens act as the theme's canonical design system and
   as a fallback if the CDN is unavailable.
   ============================================================ */

:root {
    /* UI Color System */
    --cb-primary:  #133E69;  /* primary blue: badges, links, accents  */
    --cb-dark-bg:  #080E17;  /* dark background: footer, dark banners */
    --cb-card-bg:  #0B2540;  /* card background: dark glass cards     */
    --cb-text:     #0b1b2b;  /* body text on light backgrounds        */
    --cb-slate:    #475569;  /* secondary text (slate-600)            */
    --cb-border:   #e2e8f0;  /* light card border (slate-200)         */

    /* UI Typography */
    --cb-font-sans:  'Outfit', system-ui, -apple-system, sans-serif;
    --cb-font-serif: 'Playfair Display', Georgia, serif;
}

/* Base typography - identical to the reference UI (also set in
   header.php inline styles; values kept in sync on purpose). */
body {
    font-family: var(--cb-font-sans);
    background-color: #ffffff;
    color: var(--cb-text);
}

/* Display typography - Playfair Display serif, matching the
   reference UI headings rendered with Tailwind's font-serif. */
.font-serif { font-family: var(--cb-font-serif); }

/* Theme typography utility classes - available on every
   template, including ones that do not use Tailwind utilities. */
.cb-sans  { font-family: var(--cb-font-sans); }
.cb-serif { font-family: var(--cb-font-serif); }

/* UI color utilities (reference palette) */
.cb-primary    { color: var(--cb-primary); }
.cb-bg-primary { background-color: var(--cb-primary); }