/* ==========================================================================
   theme.css — THE DESIGN LAYER (change your app's whole look right here)
   --------------------------------------------------------------------------
   Every color, font, and shape lives in these CSS variables. Change a value
   here and it updates everywhere. You do NOT need to touch any other CSS.

   HOW COLOR WORKS (plain version):
   - A hex code like #2f6fed is Red-Green-Blue written in base-16.
   - Pick a background, a text color that's easy to read on it, and ONE accent
     color for buttons and highlights. Keep the accent for "do this" moments.
   - Test contrast: dark text on light background (or the reverse). If you have
     to squint, it's wrong.
   ========================================================================== */

:root {
  /* ---- BRAND COLORS ----
     Batman palette: mostly black/near-black, a vivid blue as the primary
     action color, and gold-yellow used sparingly for highlights/status —
     the classic black-and-blue suit with a yellow bat-symbol accent. */
  --bg:        #0a0d12;   /* page background (near-black, cool navy tint) */
  --surface:   #12161f;   /* cards sit on top of the page — slightly lighter */
  --ink:       #f2f4f8;   /* main text — near-white for contrast on dark bg */
  --muted:     #8b93a7;   /* quieter text (labels, hints) — blue-gray */
  --accent:    #2f6fed;   /* PRIMARY action color (buttons, links) — blue */
  --accent-ink:#ffffff;   /* text that sits on the accent color */
  --secondary: #f5c518;   /* second color for tags/status — gold-yellow (used sparingly) */
  --line:      #262c38;   /* thin borders */
  --ok:        #f5c518;   /* "confirmed" / good — the yellow highlight */
  --wait:      #f5c518;   /* "waiting" / caution — same yellow, kept to 3 colors total */

  /* ---- TYPE (fonts) ----
     No web fonts on purpose: the app works offline and loads instantly.
     Georgia gives headings an editorial, human feel; the system font keeps
     body text crisp on every device. */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- SHAPE & SPACING ---- */
  --radius:    14px;      /* how round corners are */
  --radius-lg: 18px;      /* bigger cards */
  --gap:       16px;      /* standard spacing unit */
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);   /* the "phone" frame on desktop */
  --maxw:      640px;     /* how wide long-form content gets */
  --appw:      480px;     /* the app column width — phone-like on big screens */

  /* ---- APP SHELL EXTRAS ----
     Soft, translucent versions of the brand colors (used for highlights,
     selected options, and status pills). Change the color above and these
     follow — they're the SAME hue, just faded. */
  --accent-soft:    rgba(47,111,237,.16);   /* faded blue background */
  --accent-ring:    rgba(47,111,237,.35);   /* focus glow */
  --secondary-soft: rgba(245,197,24,.16);   /* faded gold-yellow background */
  --backdrop:       #05070a;               /* deeper black behind the phone frame */
}

/* ---- COPY (words the app says) live near the top so they're easy to find ----
   Most on-screen words are in the HTML files. The app NAME is set in one place:
   change --app-name here AND the <title>/manifest if you rename the app. */
:root { --app-name: "Batman"; }