/* ============================================================
   theme.css — Design tokens (colors, fonts, spacing)
   ============================================================
   This is the file to edit if you want to change the LOOK of
   the site without touching any structure or layout. Each
   variable below has a comment explaining what it controls.

   QUICK CHANGES
   -------------
   • Want a different overall color palette?
       → Edit the colors under "Light-charcoal background", "Ink",
         "Periwinkle accent", and "Terracotta accent".

   • Want different fonts?
       → Edit the three font variables under "Typography".
         (Font files are self-hosted in assets/fonts/ and declared
         in styles/fonts.css — ask the AI to swap in a new family.)

   • Want different spacing or sizing?
       → Edit the variables under "Layout & spacing".

   COLOR FORMAT
   ------------
   All colors are written as hex codes (e.g. #d7dbe2). You can
   use any color picker (search "color picker" online) to find
   new hex values.

   THEME NOTE
   ----------
   This is a light "charcoal" theme: a muted, cool light-grey
   body (NOT cream, NOT a dark theme), with near-black charcoal
   text/borders and dark charcoal "instrument" panels (status
   bar, news log, footer) carrying light text.
============================================================ */

:root {

  /* ---------- Background ---------- */
  /* The site surface is a flat periwinkle-tinted ground. To change the
     overall page color, edit --bg. */
  --bg:                #edeef8;   /* very light grey-periwinkle page surface */

  /* ---------- Panel / card surfaces ---------- */
  --panel:             #edeef8;   /* raised panels — seamless with page surface */
  --panel-inset:       #e4e5f2;   /* nested cards — subtly deeper for hierarchy */

  /* ---------- Ink (dark text & borders) ---------- */
  --ink:               #1b1e26;   /* near-black charcoal; main text, all borders,
                                     and the dark instrument panels */
  --muted:             #4c515d;   /* secondary text (paragraphs, metadata) */

  /* ---------- Dark charcoal panel (nav bar, footer, news log) ---------- */
  --navy:              #1b1e26;   /* dark panel background bottom */
  --navy-soft:         #2b303b;   /* dark panel background top (gradient) */

  /* ---------- Periwinkle accent (nav hover, monogram frames, section headers) ---------- */
  --peri:              #8b8fc7;   /* base periwinkle */
  --peri-light:        #b3b6dc;   /* lighter periwinkle */
  --peri-bright:       #c8caea;   /* brightest periwinkle (hover states) */
  --peri-deep:         #3d4179;   /* darkest periwinkle (active strong text) */

  /* ---------- Terracotta accent (active tab, highlights) ---------- */
  --terra-light:       #d27a4c;   /* lighter terracotta */
  --terra-dark:        color-mix(in oklab, #9e4b2b 72%, #000);   /* darker terracotta */
  --terra-cta:         #9e4b2b;   /* accessible terracotta for the active tab */

  /* ---------- Shadows ---------- */
  --shadow:            rgba(20, 22, 30, 0.45);
  --shadow-ink:        #939395;   /* solid offset drop-shadow color (tweakable) */
  --shadow-panel:      5px 5px 0 var(--shadow-ink);   /* main panel offset shadow */
  --shadow-lift:       3px 3px 0 var(--shadow-ink);   /* smaller lift shadow */
  --on-dark:           #e6e9ef;   /* light text/elements on dark or saturated surfaces */

  /* ---------- Catppuccin Mocha (terminal surfaces) ----------
     Used ONLY by the top status bar/news ticker and the Group Activity log,
     to give those "instrument" panels an authentic terminal color scheme
     (https://catppuccin.com, Mocha flavor). Each token is the Mocha color
     closest to the value it replaced. */
  --ctp-base:          #1e1e2e;   /* panel background   (was --ink   #1b1e26) */
  --ctp-text:          #cdd6f4;   /* body text          (was --bg    #edeef8) */
  --ctp-lavender:      #b4befe;   /* labels & accents   (was --peri-bright #c8caea) */
  --ctp-peach:         #fab387;   /* dates & headers    (was --terra-light #d27a4c) */
  --ctp-green:         #a6e3a1;   /* tags               (was --signal-green #66d27a) */
  --ctp-line:          rgba(205, 214, 244, 0.16);   /* hairline separators */
  --ctp-dim:           rgba(205, 214, 244, 0.35);   /* ticker bullet separators */

  /* ---------- Typography ---------- */
  --font-body:    "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", Courier, monospace;

  /* ---------- Layout & spacing ---------- */
  --site-max:          1520px;    /* max width of the centered site */
  --space-4:           18px;
  --space-5:           22px;
  --radius-none:       0;          /* corner radius — keep at 0 for the sharp look */
  --transition-fast:   0.18s ease; /* speed of all hover transitions */

  /* ---------- Layout tweaks ----------
     Edit these to nudge the layout. */
  --nav-gap:           18px;   /* horizontal spacing between nav buttons */
  --nav-btn-shift:     0px;    /* vertical nudge of the nav button row */

  /* ---------- Layering (z-index) ---------- */
  /* Stacking order for overlapping elements. Higher numbers sit on top.
     Leave these unless you know what you're doing. */
  --z-nav:             20;    /* navigation panel */
  --z-dropdown:        100;   /* nav dropdown menu (sits above the nav) */

}