/* ============================================================
   C.L. Stegall — Theme Tokens
   ============================================================

   THIS FILE IS THE ENTIRE VISUAL IDENTITY OF THE SITE.

   To reskin the site, edit only this file.

   styles.css consumes these tokens via var(--token-name).
   No colors, fonts, sizes, or spacing values are hard-coded in
   styles.css — every visual decision routes through the variables
   below. Swap them and the site reskins everywhere at once.

   To experiment with an alternate look, you can either:
     1. Edit the values below in place, or
     2. Create theme-alt.css with the same :root structure and
        swap the <link rel="stylesheet" href="theme.css"> line
        in each HTML page to point at it.

   The tokens are grouped: COLOR, TYPE, LAYOUT.

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

:root {

    /* COLOR — Surfaces ------------------------------------------ */
    --bone:        #F5F1EA;   /* primary background (warm off-white) */
    --bone-warm:   #EAE3D6;   /* secondary surface, warm panels       */
    --bone-dim:    #E2DBC9;   /* tertiary, cover placeholders         */

    /* COLOR — Text & Ink ---------------------------------------- */
    --ink:         #0E0E0E;   /* primary text, dark surfaces          */
    --ink-soft:    #2A2A2A;   /* secondary text                       */
    --slate:       #595550;   /* tertiary text, captions, fine print  */

    /* COLOR — Accent (single) ----------------------------------- */
    --oxblood:     #5C1A1B;   /* CTA hover, accent text on bone       */
    --oxblood-dim: #8A3A3B;   /* accent on dark surfaces              */

    /* COLOR — Rules / Dividers ---------------------------------- */
    --rule:         rgba(14,14,14,0.12);
    --rule-strong:  rgba(14,14,14,0.32);

    /* COLOR — Cinema (always-dark surfaces) ---------------------- */
    /* These tokens drive the hero, footer, pull-quote, in-development,
       support, and final-CTA — sections that stay dark in every theme
       to preserve the cinematic feel. Body content swaps with the
       theme above; cinema stays cinema. */
    --hero-bg-1:           #0A0A0C;   /* top of hero gradient        */
    --hero-bg-2:           #14110F;   /* mid (canonical "cinema" bg) */
    --hero-bg-3:           #1A1410;   /* bottom                      */
    --hero-accent:         rgba(92,26,27,0.32);  /* oxblood radial   */
    --cinema:              #14110F;   /* primary dark surface        */
    --on-cinema-text:      #F5F1EA;   /* text on cinema              */
    --on-cinema-text-dim:  #EAE3D6;   /* dimmed text on cinema       */
    --on-cinema-rule:      rgba(245,241,234,0.12);
    --on-cinema-rule-strong: rgba(245,241,234,0.32);
    --hero-text:           var(--on-cinema-text);  /* hero foreground */


    /* IMAGE TREATMENTS ------------------------------------------ */
    /* The logo (clslogo_black.png) is a black wordmark. In the
       light theme it sits on bone — a gentle brightness reduction
       keeps it from feeling stamped. In the dark theme it would
       disappear against the near-black header, so the dark theme
       overrides this to invert the image and lift it slightly. */
    --logo-filter: contrast(1) brightness(0.85);


    /* TYPE — Families ------------------------------------------- */
    --font-display: 'Crimson Pro', Georgia, serif;
    --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', sans-serif;


    /* LAYOUT — Spatial system ----------------------------------- */
    --measure:     680px;                         /* reading width   */
    --gutter:      max(1.5rem, 5vw);              /* horizontal pad  */
    --max-w:       1200px;                        /* site max width  */
    --section-y:   clamp(4rem, 9vw, 7rem);        /* section padding */
}