/* ============================================================
   Erango — iSAFF 2026 Brand Kit (working stylesheet)
   Design tokens for the iSAFF site revamp. Source of truth
   until an official brand guide is supplied.
   Palette sampled from the 2026 homepage mockup (2026-06-17).
   NOTE: tokens + opt-in utilities only — does NOT restyle the
   live site until these classes/vars are applied.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Canva Sans';
  src:url('./fonts/canva-sans-regular.woff2') format('woff2'),
      url('./fonts/canva-sans-regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fragille';
  src:url('./fonts/fragille-regular.woff2?v=2') format('woff2'),
      url('./fonts/fragille-regular.woff?v=2') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Design tokens ---------- */
:root{
  /* Brand purples */
  --isaff-purple:#9C66DE;        /* PRIMARY brand purple (amethyst violet) */
  --isaff-purple-light:#BA90F0;  /* lavender tint */
  --isaff-purple-deep:#47075E;   /* deep shadow purple */
  --isaff-purple-mid:#543787;

  /* Secondary accents */
  --isaff-lime:#B8F830;          /* chartreuse (Sponsors card) */
  --isaff-orange:#F88000;        /* orange (Volunteer card) */

  /* Neutrals */
  --isaff-black:#0E0E0E;
  --isaff-ink:#111111;
  --isaff-gray:#7A7A7A;
  --isaff-line:#E8E8E8;
  --isaff-white:#FFFFFF;

  /* Semantic aliases */
  --isaff-bg:var(--isaff-black);
  --isaff-text:var(--isaff-white);
  --isaff-accent:var(--isaff-purple);
  --isaff-link:var(--isaff-purple-light);

  /* Typography */
  --isaff-font-heading:'Canva Sans',"Hanken Grotesk",system-ui,sans-serif;
  --isaff-font-body:'Canva Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --isaff-font-accent:'Fragille',"Brush Script MT",cursive; /* decorative / display */

  /* Shape (mockup uses mostly-square cards) */
  --isaff-radius:4px;
}

/* ---------- Opt-in utilities (apply intentionally during the build) ---------- */
.isaff-font-heading{font-family:var(--isaff-font-heading)!important;}
.isaff-font-body{font-family:var(--isaff-font-body)!important;}
.isaff-font-accent{font-family:var(--isaff-font-accent)!important;}

.isaff-purple{color:var(--isaff-purple)!important;}
.isaff-purple-light{color:var(--isaff-purple-light)!important;}
.isaff-lime{color:var(--isaff-lime)!important;}
.isaff-orange{color:var(--isaff-orange)!important;}

.bg-isaff-purple{background-color:var(--isaff-purple)!important;}
.bg-isaff-purple-light{background-color:var(--isaff-purple-light)!important;}
.bg-isaff-purple-deep{background-color:var(--isaff-purple-deep)!important;}
.bg-isaff-lime{background-color:var(--isaff-lime)!important;}
.bg-isaff-orange{background-color:var(--isaff-orange)!important;}
.bg-isaff-black{background-color:var(--isaff-black)!important;}

.border-isaff-purple{border-color:var(--isaff-purple)!important;}

/* Button helper matching the mockup's purple buttons */
.isaff-btn{
  display:inline-block;font-family:var(--isaff-font-heading);font-weight:400;
  background:var(--isaff-purple);color:#fff;padding:.7em 1.4em;
  border-radius:var(--isaff-radius);text-decoration:none;line-height:1;
  transition:background .2s ease;cursor:pointer;border:1px solid var(--isaff-purple);
}
.isaff-btn:hover{background:var(--isaff-purple-deep);border-color:var(--isaff-purple-deep);}
.isaff-btn--outline{background:transparent;color:var(--isaff-purple);}
.isaff-btn--outline:hover{background:var(--isaff-purple);color:#fff;}