/* ==========================================================================
   THEME.CSS  —  The "dials" for the whole site.
   ==========================================================================

   Kunal: this is the ONE file to open if you want to change how the site
   LOOKS without touching layout. Change a value here and every page updates.

   Colours are written as hex codes (#rrggbb). Pick new ones at
   https://colorpicker.me — paste the hex code between the colon and the
   semicolon. Don't delete the "--" names on the left.

   Everything below is grouped and labelled. Anything you don't recognise,
   leave alone.
   ========================================================================== */

:root {
  /* ---- 1. CORE COLOURS ---------------------------------------------------
     The site is dark by design — deep navy with a warm gold accent, carried
     over from your original site. */

  --ink-void:    #04060d;   /* Deepest background, behind everything          */
  --ink-deep:    #070b18;   /* Main page background                           */
  --ink-raised:  #0d1326;   /* Cards and raised panels                        */
  --ink-line:    #1c2439;   /* Hairline borders and dividers                  */

  --gold:        #e0b25f;   /* Primary accent: links, buttons, rules          */
  --gold-soft:   #f2d8a4;   /* Lighter gold for gradients and hovers          */
  --starlight:   #7d9dff;   /* Cool secondary accent, used sparingly          */

  --text:        #eef1f8;   /* Headings and body text                         */
  --text-muted:  #98a3bd;   /* Secondary text, captions, meta                 */
  --text-faint:  #5f6b86;   /* Labels, numbering, very quiet text             */

  /* ---- 2. READING MODE (journal pages only) ------------------------------
     The paper-coloured mode readers can switch to on story pages. */

  --paper:        #f6f2e9;
  --paper-raised: #fffdf8;
  --paper-line:   #e0d8c7;
  --paper-text:   #23201a;
  --paper-muted:  #6b6355;

  /* ---- 3. TYPE -----------------------------------------------------------
     To change a typeface you must ALSO change the Google Fonts <link> in the
     top of each .html file. See EDITING-GUIDE.md, "Changing the fonts". */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;  /* Headings */
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif; /* UI, body */
  --font-read:    "Fraunces", Georgia, serif;                     /* Stories  */

  /* ---- 4. SPACING & SHAPE ------------------------------------------------ */

  --page-max:    1240px;  /* Widest the content ever gets                     */
  --read-max:    68ch;    /* Line length on story pages — keep 60-75ch        */
  --gutter:      clamp(20px, 5vw, 64px);  /* Space at the left/right edges    */
  --radius:      18px;    /* Corner rounding on cards and buttons             */
  --radius-sm:   10px;

  /* ---- 5. MOTION --------------------------------------------------------
     Lower numbers = snappier. Raise them if you want a slower, calmer feel.
     (Visitors who ask their device for reduced motion get no animation at
     all — that's handled automatically.) */

  --t-fast:  180ms;
  --t-base:  420ms;
  --t-slow:  900ms;
  --ease:    cubic-bezier(0.22, 0.75, 0.24, 1);

  /* ---- 6. DERIVED — you can ignore this section ------------------------- */

  --glass:        rgba(7, 11, 24, 0.88);
  --glow-gold:    0 0 40px rgba(224, 178, 95, 0.18);
  --shadow-card:  0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --grad-gold:    linear-gradient(115deg, var(--gold-soft), var(--gold) 55%, #b98d3e);
  --grad-rule:    linear-gradient(90deg, transparent, var(--gold), transparent);
}