/* ==========================================================================
   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.

   Ported from the "Our Tune" design (claude.ai/design project
   3e70f53e-a17f-46be-acd6-1cd026b9d336): a dark, neon, going-out-at-night
   palette instead of a light card UI.
   ========================================================================== */

:root {
  /* ---- BRAND COLORS ---- */
  --bg:        #07060E;   /* page background (near-black) */
  --surface:   #12101f;   /* cards sit on top of the page (soft violet-black) */
  --ink:       #ffffff;   /* main text */
  --muted:     rgba(255,255,255,.5);   /* quieter text (labels, hints) */
  --accent:    #7B5CFF;   /* PRIMARY action color (buttons, links) — violet */
  --accent-ink:#07060E;   /* text that sits on the accent color */
  --secondary: #29E7CD;   /* second color for tags/status — cyan */
  --line:      rgba(255,255,255,.12);  /* thin borders */
  --glass:     rgba(255,255,255,.06);  /* frosted-glass card background */
  --ok:        #29E7CD;   /* "confirmed" / good */
  --wait:      #FF5CA8;   /* "waiting" / caution — pink */

  /* ---- GRADIENT (the "Our Tune" signature — violet -> pink -> cyan) ---- */
  --grad: linear-gradient(96deg, #7B5CFF, #FF5CA8 55%, #29E7CD);

  /* ---- TYPE (fonts) ----
     Space Grotesk from Google Fonts, loaded in index.html — one intentional
     web font for the display/brand feel. If it fails to load (offline first
     visit, no network), both fall back to the system font so the app never
     shows unstyled text. */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- SHAPE & SPACING ---- */
  --radius:    14px;      /* how round corners are */
  --radius-lg: 20px;      /* bigger cards */
  --gap:       16px;      /* standard spacing unit */
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);   /* 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(123,92,255,.16);   /* faded violet background */
  --accent-ring:    rgba(123,92,255,.35);   /* focus glow */
  --secondary-soft: rgba(41,231,205,.14);   /* faded cyan background */
  --backdrop:       #0A0812;                /* deeper near-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: "Ourtune"; }