/* ============================================================
   THEME — CSS custom properties (variables)
   ============================================================ */

/*
  TOC
  1. Color palette
  2. Typography
  3. Sizing
  4. Animation
  5. Dark mode overrides
*/

/*
  Color Palette
  #FFFAF0  --color-bg           warm white background
  #111111  --color-text         near black body text
  #FF3D00  --color-link         orange-red links & accent
  #D93400  --color-link-hover   darker orange for link hover
  #FFAA90  --color-accent-muted lighter muted orange for secondary labels
  #555555  --color-light-text   mid-grey secondary text
  #999999  --color-faded-text   light-grey for tags & de-emphasised labels
  #dddddd  --color-border       light-grey UI dividers & borders
  #1E2A3A  --color-header       dark slate header background
  #C8BEA8  --color-image-border warm taupe image borders
*/

:root {
    color-scheme: light dark;

    /* ---- 1. Colors ---- */
    --color-bg: #FFFAF0;
    --color-text: #111111;
    --color-link: #FF3D00;
    --color-link-hover: #D93400;
    --color-accent: #FF3D00;
    --color-accent-muted: #FFAA90;
    --color-light-text: #555555;
    --color-faded-text: #999999;
    --color-border: #dddddd;
    --color-header: #1E2A3A;
    --color-image-border: #C8BEA8;
    --color-logo-text: #f0ece4;
    --color-logo-byline: #4a4e6a;
    --color-footer-bg: #EDE8E3;

    /* ---- 2. Typography ---- */
    --font-body: "Quicksand", sans-serif;
    --font-heading: "Unbounded", sans-serif;
    --font-mono: Consolas, "Courier New", monospace;

    /* ---- 3. Sizing ---- */
    --header-height: 88px;
    --content-width: 800px;
    --content-width-wide: 1100px;

    /* ---- 4. Animation ---- */
    --transition-base: 0.2s ease;
    --transition-fast: 0.15s ease;
}


/* ---- 5. Dark mode overrides ---- */

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #131C27;
        --color-text: #E0DCD4;
        --color-light-text: #7A8090;
        --color-faded-text: #535C6A;
        --color-border: #2E3A4A;
        --color-image-border: #3A4A5C;
        --color-footer-bg: #1E2A3A;
    }
}