/* ============================================================
   Service in Unity — Design Tokens
   Source: SIU design system (colors_and_type.css)
   Only the two font families this page uses are shipped:
   Montserrat (display/UI) and Epilogue (body).
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Epilogue";
  src: url("../fonts/Epilogue-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Epilogue-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors — the 7 approved colors. No others. */
  --siu-blue:      #25AAE1;
  --siu-blue-deep: #1673BA;
  --siu-white:     #FFFFFF;
  --siu-orange:    #F1AC42;
  --siu-yellow:    #FFE78A;
  --siu-black:     #000000;
  --siu-gray:      #6C6C6C;

  /* Semantic accents */
  --accent-primary:       var(--siu-blue-deep);
  --accent-primary-hover: #0F5C95;

  /* Borders */
  --border-1: rgba(0, 0, 0, 0.10);
  --border-2: rgba(0, 0, 0, 0.16);

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-water: 0 18px 40px -16px rgba(22,115,186,0.35);

  /* Type */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Epilogue", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}