/* =====================================================================
   THEME FILE  -  change colours and fonts HERE only.
   Every value below is used across the whole website.
   After editing: save, upload this file, then hard-refresh (Ctrl+Shift+R).
   Colours can be written as  #ffffff  or  rgba(255,255,255,.5)
   ===================================================================== */

/* OPTIONAL: to use a Google Font, remove the comment marks around ONE line
   below, then set --font-body / --font-heading in section 1.
   (This line must stay at the very top of the file.) */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap'); */

:root {

  /* ===============================================================
     1. FONTS
     =============================================================== */
  --font-body:    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Google Font example:  --font-body: "Poppins", sans-serif;  */

  --font-size-title:   clamp(46px, 7vw, 82px);  /* big home page title (phones use a smaller size automatically) */
  --font-size-section: 34px;                    /* page / popup headings */
  --font-weight-heading: 700;                   /* 400 normal, 700 bold, 800 extra bold */
  --font-size-body:    16px;                    /* intro paragraph text */


  /* ===============================================================
     2. TEXT COLOURS
     =============================================================== */
  --text-heading: #ffffff;   /* titles and main headings */
  --text-body:    #f1ebf0;   /* paragraphs and normal text */
  --text-muted:   #d8cdd6;   /* small / secondary text, hints, footer */
  --text-accent:  #9bdcff;   /* small coloured labels (YOUTH • COMMUNITY, dates, roles, link hover) */
  --text-shadow:  0 1px 14px rgba(0,0,0,.5);   /* helps text stay readable over the photo. Use  none  to turn off */
  --text-success: #8ce2b4;   /* "registered successfully" message */
  --text-error:   #ff9da9;   /* error messages */


  /* ===============================================================
     3. BUTTONS
     =============================================================== */
  --btn-radius: 999px;       /* 999px = fully round (pill),  14px = soft corners,  0 = square */

  /* "Register Now" buttons (top bar, home page, footer) */
  --btn-register-bg:   #ffffff;
  --btn-register-text: #07214f;
  --btn-register-glow: rgba(255,255,255,.18);

  /* Main buttons (Submit etc.) - gradient from left colour to right colour */
  --btn-primary-from: #0a3d91;   /* dark side */
  --btn-primary-to:   #38bdf8;   /* light side */
  --btn-primary-text: #ffffff;

  /* Outline buttons */
  --btn-ghost-text:   #ffffff;
  --btn-ghost-border: rgba(255,255,255,.18);
  --btn-ghost-bg:     rgba(255,255,255,.03);

  /* Small round buttons (close X, gallery arrows, calendar) */
  --btn-small-bg:     rgba(255,255,255,.06);


  /* ===============================================================
     4. BACKGROUNDS
     =============================================================== */
  /* Background photo (put the files in the images folder) */
  --bg-image-desktop: url("/images/background-desktop.jpg");   /* landscape */
  --bg-image-mobile:  url("/images/background-mobile.jpg");    /* portrait / phones */
  --bg-image-opacity: 1;       /* 1 = full photo, .6 = fainter, .3 = very faint (lower = more of the page colour shows) */

  /* Dark layer on top of the photo (top to bottom). Raise the last number to darken, lower to show more photo. */
  --bg-overlay-top:    rgba(11,3,6,.18);
  --bg-overlay-bottom: rgba(11,3,6,.42);

  --page-bg-color:   #02050d;  /* colour behind the photo (also shows if the photo is missing) */
  --page-bg-color-2: #040b1a;  /* second colour for the soft page gradient */

  --nav-bg:      rgba(3,8,20,.65);                                         /* top navigation bar */
  --card-bg:     linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));   /* glass boxes (Vision box, cards, popups) */
  --card-border: rgba(255,255,255,.10);                                    /* thin outline on boxes */
  --card-border-strong: rgba(255,255,255,.18);
  --input-bg:    rgba(2,6,16,.62);                                         /* form fields */
  --popup-bg:    rgba(6,16,38,.92);                                        /* date calendar popup */
  --overlay-bg:  rgba(2,5,13,.78);                                         /* dark screen behind popups */


  /* ===============================================================
     5. ACCENT COLOURS  (glows, focus rings, highlights, soft shadows)
     =============================================================== */
  --accent-dark:  #0a3d91;
  --accent-light: #38bdf8;


  /* ===============================================================
     6. GALAXY ANIMATION (home page, right side)
     =============================================================== */
  --galaxy-core:   #ebf8ff;   /* bright centre */
  --galaxy-glow:   #5aaaff;   /* glow around the centre */
  --galaxy-star-1: #7cc4ff;   /* star colours (mixed together) */
  --galaxy-star-2: #4f8cff;
  --galaxy-star-3: #bfe6ff;
}