/* ================================================================
   LILSLAP.COM — theme.css   ·   THE CONTROL PANEL
   ----------------------------------------------------------------
   This is the ONE file to edit when you want to re-skin the site.
   Change a value here and it updates everywhere automatically.

   Nothing in here is page-specific — it is pure design tokens
   (colours, fonts, sizes). Load order matters: this file is
   linked BEFORE main.css on every page so the variables exist
   before they are used.
================================================================ */

/* ----------------------------------------------------------------
   1. FONTS
   To swap fonts: change the Google Fonts URL below, then update
   --font-head / --font-body to match the new family names.
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');

:root {
  --font-head: 'Kanit', sans-serif;    /* headings, logo, buttons */
  --font-body: 'DM Sans', sans-serif;  /* body text, inputs       */

  /* --------------------------------------------------------------
     2. BRAND COLOURS  ·  the two accents the whole site is built on
     Change these two and the gradients, glows, buttons, links and
     highlights all shift with them.
  -------------------------------------------------------------- */
  --brand-primary:   #1a4ed8;  /* main accent (blue)   */
  --brand-secondary: #ec4899;  /* support accent (pink) */

  /* --------------------------------------------------------------
     3. BACKGROUNDS  ·  darkest → lightest panel
     The page sits on --bg; cards/panels step up through bg2–bg4.
  -------------------------------------------------------------- */
  --bg:  #07090f;  /* page background     */
  --bg2: #0c101b;  /* cards / panels      */
  --bg3: #101625;  /* inputs / nested rows */
  --bg4: #141b2e;  /* raised elements     */

  /* --------------------------------------------------------------
     4. BLUE SHADES  (derived from --brand-primary; tweak if needed)
  -------------------------------------------------------------- */
  --blue-deep: #091630;
  --blue-dark: #1233a0;
  --blue:      var(--brand-primary);
  --blue-mid:  #2563eb;
  --blue-glow: #3b82f6;
  --blue-soft: #60a5fa;
  --blue-pale: #bfdbfe;

  /* --------------------------------------------------------------
     5. PINK SHADES  (derived from --brand-secondary; tweak if needed)
  -------------------------------------------------------------- */
  --pink:      var(--brand-secondary);
  --pink-soft: #f472b6;
  --pink-dim:  #9d174d;
  --pink-pale: #fce7f3;

  /* --------------------------------------------------------------
     6. TEXT
  -------------------------------------------------------------- */
  --text:       #e2e8f0;  /* main copy        */
  --text-dim:   #94a3b8;  /* secondary copy   */
  --text-faint: #475569;  /* labels / muted   */

  /* --------------------------------------------------------------
     7. STATUS COLOURS  ·  success / danger / warning
     Used by form messages, win/loss pills, star ratings, etc.
     -tint variants are the translucent backgrounds.
  -------------------------------------------------------------- */
  --success:      #86efac;
  --success-tint: rgba(34, 197, 94, .12);
  --danger:       #fca5a5;
  --danger-tint:  rgba(239, 68, 68, .10);
  --warning:      #fbbf24;
  --warning-tint: rgba(245, 158, 11, .12);

  /* --------------------------------------------------------------
     8. BORDERS & GLOWS  (translucent accent tints)
  -------------------------------------------------------------- */
  --border:  rgba(59, 130, 246, .15);  /* blue hairline */
  --border2: rgba(236, 72, 153, .15);  /* pink hairline */
  --glow-b:  rgba(59, 130, 246, .40);  /* blue shadow glow */
  --glow-p:  rgba(236, 72, 153, .30);  /* pink shadow glow */

  /* --------------------------------------------------------------
     9. SHAPE & LAYOUT
  -------------------------------------------------------------- */
  --radius:    10px;   /* default corner rounding */
  --radius-lg: 18px;   /* cards / large panels    */
  --nav-h:     68px;   /* nav bar height          */
  --ticker-h:  36px;   /* top ticker banner height */
}