/* ============================================================
   TYPOGRAPHY SYSTEM — Kael Sterling CV
   ============================================================ */

/* ------------------------------------------------------------
   ROOT VARIABLES (COLORS + GLOBAL FONTS)
   ------------------------------------------------------------ */

:root {
    /* Colors */
    /* --color-text: #ffffff; */
    --color-accent: #444;
    --color-link: #0055ff;
    --color-link-hover: #003bb8;

    /* Global font families */
    --font-body: "Inter", system-ui, sans-serif;
    --font-heading: "Space Grotesk", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --font-accent: "Caveat", cursive;
    --font-display: "Orbitron", sans-serif;
    --font-audiowide: "Audiowide", sans-serif;

    /* Font sizes */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.75rem;
    --fs-xxl: 2.25rem;

    /* Font weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
}

/* ------------------------------------------------------------
   FONT UTILITY CLASSES (DIRECT FONT NAMES)
   ------------------------------------------------------------ */

.inter {
    font-family: "Inter", system-ui, sans-serif;
}

.space-grotesk {
    font-family: "Space Grotesk", sans-serif;
}

.jetbrains {
    font-family: "JetBrains Mono", monospace;
}

.caveat {
    font-family: "Caveat", cursive;
}

.orbitron {
    font-family: "Orbitron", sans-serif;
}

.audiowide {
    font-family: "Audiowide", sans-serif;
}

/* ------------------------------------------------------------
   BASE TEXT
   ------------------------------------------------------------ */

html {
    font-family: var(--font-body);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--weight-normal);
    line-height: 1.6;
}

/* ------------------------------------------------------------
   HEADINGS
   ------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
}

h1 {
    font-size: var(--fs-xxl);
    letter-spacing: -0.5px;
}

h2 {
    font-size: var(--fs-xl);
}

h3 {
    font-size: var(--fs-lg);
}

/* ------------------------------------------------------------
   MONO / TECHNICAL TEXT
   ------------------------------------------------------------ */

code,
pre,
.mono {
    font-family: "JetBrains Mono", monospace;
    font-size: var(--fs-sm);
    font-weight: var(--weight-normal);
}

.meta {
    font-family: "JetBrains Mono", monospace;
    font-size: var(--fs-xs);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   ACCENT TEXT
   ------------------------------------------------------------ */

.accent {
    font-family: "Caveat", cursive;
    font-size: var(--fs-lg);
    font-weight: var(--weight-normal);
    color: var(--color-accent);
}

/* ------------------------------------------------------------
   DISPLAY / NAME HEADER
   ------------------------------------------------------------ */

.display {
    font-family: "Orbitron", sans-serif;
    font-size: var(--fs-xl);
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
}

/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */

a {
    font-family: inherit;
    font-weight: var(--weight-medium);
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   LISTS
   ------------------------------------------------------------ */

ul,
ol {
    margin: 0.5rem 0 1rem 1.25rem;
    padding: 0;
    font-size: var(--fs-base);
}

/* ------------------------------------------------------------
   PARAGRAPHS
   ------------------------------------------------------------ */

p {
    margin: 0 0 1rem;
}

/* ------------------------------------------------------------
   UTILITY WEIGHT + SIZE CLASSES
   ------------------------------------------------------------ */

.bold {
    font-weight: var(--weight-bold);
}

.light {
    font-weight: var(--weight-light);
}

.upper {
    text-transform: uppercase;
}

.small {
    font-size: var(--fs-sm);
}

.large {
    font-size: var(--fs-lg);
}