/* =============================================================
   GMFJ PWA — Brand design tokens
   Colours, type scale and fonts extracted live from
   www.getmyfirstjob.co.uk (styles.css :root). Keep this file as
   the single source of brand truth — everything else references
   these custom properties.
   ============================================================= */

/* ---- Web fonts (bundled locally from the live site) ---- */
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Collidge";
  src: url("../fonts/Collidge-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Collidge Outline";
  src: url("../fonts/Collidge-RegularOutline.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---- Core ---- */
  --primary-100: #323442;
  --secondary-200: #23374e;
  --background: #ffffff;

  /* ---- Blues ---- */
  --light-blue-100: #f8f9ff;
  --soft-blue-200: #e8eaf6;
  --indigo-300: #3c5f9c;

  /* ---- Pinks / purple ---- */
  --pink-100: #ef558b;
  --deep-pink-200: #c60b88;
  --purple-300: #a4489f;
  --dark-purple-400: #650560;

  /* ---- Warm ---- */
  --coral-100: #f98c66;
  --red-200: #eb4a26;
  --amber-300: #eeab44;
  --tangerine-400: #ee9644;

  /* ---- Cool / green ---- */
  --mint-100: #a2d1b1;
  --teal-200: #67c096;
  --aqua-300: #46afbb;

  /* ---- Semantic aliases (use these in components) ---- */
  --brand-ink: var(--primary-100);
  --brand-navy: var(--secondary-200);
  --brand-accent: var(--deep-pink-200);
  --brand-accent-soft: var(--pink-100);
  --brand-cta: var(--red-200);
  --brand-cta-warm: var(--coral-100);
  --surface: var(--background);
  --surface-alt: var(--light-blue-100);
  --surface-soft: var(--soft-blue-200);
  --success: var(--teal-200);
  --info: var(--aqua-300);
  --warning: var(--amber-300);

  --text-strong: var(--primary-100);
  --text: #41434f;
  --text-muted: #6b6e7c;
  --line: #e7e9f1;

  /* Signature brand gradient (hero, DNA, CTAs) */
  --brand-gradient: linear-gradient(135deg, var(--deep-pink-200) 0%, var(--purple-300) 45%, var(--indigo-300) 100%);
  --brand-gradient-warm: linear-gradient(135deg, var(--red-200) 0%, var(--coral-100) 55%, var(--amber-300) 100%);

  /* ---- Type ---- */
  /* Display/headings use Gilroy-Bold (weight 700). Always pair
     var(--font-display) with font-weight: var(--font-display-weight). */
  --font-display: "Gilroy", Helvetica, Arial, sans-serif;
  --font-display-outline: "Gilroy", Helvetica, Arial, sans-serif;
  --font-display-weight: 700;
  --font-body: "Gilroy", Helvetica, Arial, sans-serif;

  /* Fluid type scale (mirrors live --fnt-size-* clamp scale) */
  --fnt-body: clamp(0.9rem, 2.6vw, 1rem);
  --fnt-display-1: clamp(2rem, 8.2vw, 3.4rem);
  --fnt-display-2: clamp(1.7rem, 6.6vw, 2.6rem);
  --fnt-h1: clamp(1.5rem, 6vw, 2.1rem);
  --fnt-h2: clamp(1.25rem, 5vw, 1.7rem);
  --fnt-h3: clamp(1.05rem, 4.1vw, 1.35rem);
  --fnt-h4: clamp(0.95rem, 3.3vw, 1.15rem);
  --fnt-small: clamp(0.75rem, 2.4vw, 0.85rem);

  /* ---- Shape / spacing / elevation ---- */
  --radius: 0.5rem;        /* live --rz-border-radius */
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --shadow-sm: 0 1px 2px rgba(28, 39, 76, 0.08);
  --shadow-md: 0 6px 18px rgba(28, 39, 76, 0.1);
  --shadow-lg: 0 18px 40px rgba(28, 39, 76, 0.16);

  /* App shell metrics */
  --header-h: 3.5rem;
  --bottomnav-h: 4rem;
  --app-max: 480px;        /* mobile-first canvas width on desktop */

  color-scheme: light;
}

/* =============================================================
   Dark theme
   Applied via <html data-theme="dark"> (set by app.js / a no-flash
   bootstrap in index.html, honouring OS preference + a manual
   toggle). Only the SURFACE + TEXT tokens flip — the brand hues
   (pink/coral/indigo) and the signature gradient stay identical so
   the brand still reads as GMFJ in either mode.
   ============================================================= */
:root[data-theme="dark"] {
  --background: #12151f;

  /* Surfaces: page < canvas < card < raised */
  --surface: #1a1e2b;        /* cards, header, bottom nav */
  --surface-alt: #232838;    /* icon buttons, chips, kv tiles */
  --surface-soft: #0d0f17;   /* area behind the phone canvas */

  /* Soft-highlight palette tokens repurposed for dark (selected states, tracks) */
  --light-blue-100: #232838;
  --soft-blue-200: #2b3146;

  --text-strong: #f3f5fb;
  --text: #c7ccdb;
  --text-muted: #8b91a7;
  --line: rgba(255, 255, 255, 0.10);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}