/* =============================================================================
   GLOBAL.CSS — druthers.ca
   -----------------------------------------------------------------------------
   Single source of truth for colours, type, and spacing. Every other file
   references these variables rather than hardcoding hex values or font names,
   so the whole site can be retuned from this one block.

   PALETTE PROVENANCE: these are the REAL Druthers values, taken from the
   existing /druthers/ splash page that Shawn wants used as the front-page
   starting base. They are not invented, and they are not shawnjason's dark plum
   any more. The design reads as a printed newspaper: white paper, one strong
   red, warm neutral greys, hairline rules. Light only, on purpose, because a
   newspaper is a light object.

   Shawn and Christie keep final say. These are strong starting values, not a
   locked decision.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FONTS — self-hosted, no third-party CDN.

   PROVENANCE, worth knowing: the splash page inherits its typefaces from
   shawnjason's stylesheet and shipped no font files, so these came from the
   shawnjason theme. All three are open-source under the SIL Open Font License,
   so self-hosting them here is fine.

   This means TYPE IS NOT YET A DRUTHERS DECISION the way the palette is. It is
   what the admired page happens to render in. Genuinely open for the design
   session, unlike the colours.
   ----------------------------------------------------------------------------- */

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/merriweather-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Newsreader';
    src: url('../fonts/newsreader-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Newsreader';
    src: url('../fonts/newsreader-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Newsreader';
    src: url('../fonts/newsreader-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {

    /* -------------------------------------------------------------------------
       COLOUR — the Druthers palette. Tokens are named for what they carry.
       Retune the whole site's mood from these lines.
       ------------------------------------------------------------------------- */
    --red:      #cc0000;   /* THE red. Masthead, stat band, the final call. */
    --red-d:    #a30000;   /* darker red, for hovers and pressed states */
    --redtint:  #fbeceb;   /* faint red wash, for quiet emphasis blocks */

    --paper:    #ffffff;   /* the page itself */
    --warm:     #f6f4f0;   /* warmed neutral ground, so it reads chosen not default */
    --line:     #e7e2da;   /* hairline rules */
    --line-d:   #d8d2c8;   /* the heavier rule */

    --ink:      #1a1a1a;   /* headline black */
    --text:     #24211d;   /* body text, very slightly warm */
    --muted:    #6d665f;   /* secondary text, captions, kickers */

    /* -------------------------------------------------------------------------
       TYPE
       ------------------------------------------------------------------------- */
    --font-heading: 'Merriweather', Georgia, serif;
    --font-body:    'Newsreader', Georgia, serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* -------------------------------------------------------------------------
       SPACING — structural rhythm, not a brand decision.
       ------------------------------------------------------------------------- */
    --gutter:     20px;   /* standard side gutter / gap */
    --gutter-lg:  40px;   /* the bigger gap, double the standard */
}

/* -----------------------------------------------------------------------------
   BASE
   -----------------------------------------------------------------------------
   Intentionally minimal. Page and component styling lives in its own files,
   enqueued per page. This file is tokens, plus only the base rules that are
   genuinely site-wide.
   ----------------------------------------------------------------------------- */

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--paper);
}