/* =============================================================
   Flip Brand System — shared design tokens & base components
   Single source of truth for the Security Awareness Training app.
   Referenced by root pages (styles/brand.css) and by training
   modules (../styles/brand.css). Font URLs below are resolved
   relative to THIS file (styles/), so they use ../fonts/.
   ============================================================= */

/* ---------- Fonts (self-hosted, no CDN) ---------- */

/* Display — Clash Grotesk Medium 500 */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('../fonts/clash-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Body — Inter (variable subset covers 400–500) */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand colours (canonical) */
  --flip-swirl: #2151F5;   /* alias: --flip-blue — primary, CTAs, links */
  --flip-blue:  #2151F5;
  --sky:        #5FCDFD;    /* secondary surfaces */
  --green:      #65DB91;    /* CTA / tiny accent ONLY — never a background */
  --black:      #000000;    /* body text */
  --white:      #FFFFFF;    /* dominant canvas (~70%) */

  /* Brand blue tints for surfaces & hovers */
  --swirl-hover:  #1A41C4;  /* ~8% darker for hover/press */
  --swirl-tint:   #E9EEFE;  /* light wash background */
  --sky-tint:     #D4F0FF;

  /* Gradients — contain inside a shape, never full-bleed, one per composition */
  --gradient-blue-to-green: linear-gradient(90deg, #2151F5 0%, #65DB91 100%);
  --gradient-blue-to-sky:   linear-gradient(90deg, #2151F5 0%, #5FCDFD 100%);

  /* Type */
  --font-display: 'Clash Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;   /* weight 500 */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Radii — squircle is the primary brand shape */
  --radius-sm:     12px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-xl:     35px;
  --radius-square: 25%;     /* containers / photo crops */
  --radius-pill:   9999px;  /* all buttons + input fields */

  /* Borders & shadows (warm-neutral, soft — no neon glows) */
  --hairline:      #EAEAEA;
  --separator:     #D9D9D6;
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);

  /* Semantic (kept functional for legibility — not brand-forward) */
  --success-green: #4CAF50;
  --warning-amber: #FF9800;
  --error-red:     #F44336;

  /* ---- Legacy compatibility layer ----
     Old variable names still referenced inline across the app.
     Re-mapped onto brand values so existing rules pick up the
     new palette with no per-file edits. */
  --primary-purple: var(--flip-swirl);
  --dark-purple:    var(--swirl-hover);
  --light-purple:   var(--swirl-tint);
  --primary-teal:   var(--sky);
  --dark-teal:      #3BB5E8;
  --light-teal:     var(--sky-tint);
  --primary-off-black: var(--black);
  --off-black:      var(--black);
  --primary-white:  var(--white);
  --neutral-gray:   #9E9E9E;
  --light-gray:     #F9F9F9;
  --medium-gray:    #E0E0E0;
  --primary-gradient: var(--gradient-blue-to-sky);
  /* --flip-orange intentionally dropped (off-brand) */
}

/* ---------- Base type ----------
   Low-specificity so page/module-specific rules still win where set. */
body {
  font-family: var(--font-body);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ---------- Buttons (pill, brand) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,.8,.2,1);
}
.btn:hover  { filter: brightness(0.92); }
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--flip-swirl); color: var(--white); }
.btn-dark    { background: var(--black);      color: #F5F5F3; }
.btn-green   { background: var(--green);       color: var(--black); }
.btn-ghost   { background: transparent; color: var(--flip-swirl); border-color: var(--flip-swirl); }
.btn-ghost:hover { background: var(--flip-swirl); color: var(--white); filter: none; }

/* Gradient-stroke buttons (gradient lives in the border, fill is solid) */
.btn-grad-stroke-white {
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, #65DB91, #2151F5) border-box;
  border: 2px solid transparent; color: var(--black);
}
.btn-grad-stroke-dark {
  background: linear-gradient(#000, #000) padding-box,
              linear-gradient(90deg, #65DB91, #2151F5) border-box;
  border: 2px solid transparent; color: var(--white);
}

/* ---------- Inputs — pill, Flip Swirl focus ring ---------- */
.input {
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--separator);
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--white);
}
.input:focus {
  outline: none;
  border-color: var(--flip-swirl);
  box-shadow: inset 0 0 0 2px var(--flip-swirl), 0 0 0 3px rgba(33, 81, 245, 0.2);
}

/* ---------- Card — white surface, squircle-ish, soft shadow ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}