/* ============================================================
   PublicInput — Design Tokens
   Source: PublicInput Brand Guidelines (July 2024)
   Implementation surface: Metronic Bootstrap 5 admin theme
   ============================================================ */

:root {
  /* ---------- BRAND COLORS (from Brand Guidelines, p.6) ---------- */

  /* Primary blue family */
  --pi-blue-light:    #DBF1FF; /* 219-241-255 — accents, backgrounds */
  --pi-blue-mid:      #84D0F7; /* 132-208-247 — product posts, testimonial accents */
  --pi-blue:          #0395FF; /* 3-149-255   — PRIMARY brand blue */

  /* Primary orange family */
  --pi-orange-light:  #F6A572; /* 246-165-114 — light orange, product posts */
  --pi-orange:        #FF7C1D; /* 255-124-29  — PRIMARY brand orange (logo dot) */

  /* Events palette */
  --pi-events-blue:   #44C5E2; /* 68-197-226  — virtual peer exchange events */
  --pi-events-green:  #07AFAA; /* 7-175-170   — in-person events */

  /* Neutral */
  --pi-ink:           #333333; /* 51-51-51    — body copy, headlines */
  --pi-white:         #FFFFFF;

  /* ---------- DERIVED NEUTRALS (Metronic-aligned) ---------- */
  --pi-gray-100: #F9FAFB;
  --pi-gray-200: #F4F6FA;
  --pi-gray-300: #E4E6EF;
  --pi-gray-400: #B5B5C3;
  --pi-gray-500: #7E8299;
  --pi-gray-600: #5E6278;
  --pi-gray-700: #3F4254;
  --pi-gray-800: #2B2B40;
  --pi-gray-900: #181C32;

  /* ---------- SEMANTIC COLOR ALIASES ---------- */
  --fg-1: var(--pi-ink);          /* primary text */
  --fg-2: var(--pi-gray-600);     /* secondary text */
  --fg-3: var(--pi-gray-500);     /* muted / captions */
  --fg-inverse: var(--pi-white);
  --fg-link: var(--pi-blue);
  --fg-link-hover: #0277CC;

  --bg-1: var(--pi-white);        /* surface */
  --bg-2: var(--pi-gray-100);     /* page */
  --bg-3: var(--pi-gray-200);     /* subtle / hover */
  --bg-tinted-blue: var(--pi-blue-light);

  --border-1: var(--pi-gray-300); /* default rule / divider */
  --border-2: var(--pi-gray-400);
  --border-strong: var(--pi-gray-700);

  --accent-primary: var(--pi-blue);
  --accent-primary-hover: #0277CC;
  --accent-secondary: var(--pi-orange);
  --accent-secondary-hover: #E66B0E;

  /* Status (Metronic conventions, tuned to PI palette) */
  --status-success: var(--pi-events-green);
  --status-info:    var(--pi-events-blue);
  --status-warning: #FFC700;
  --status-danger:  #F1416C;

  /* ---------- TYPOGRAPHY ---------- */
  /* Headers + Subheaders → Montserrat (Brand Guidelines p.8) */
  /* Body Copy → Libre Franklin (Brand Guidelines p.8) */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (px) — Metronic-aligned, with PI display sizes for marketing */
  --fs-display-xl: 56px; /* hero */
  --fs-display:    44px; /* page hero */
  --fs-h1:         32px;
  --fs-h2:         26px;
  --fs-h3:         20px;
  --fs-h4:         17px;
  --fs-h5:         15px;
  --fs-body:       14px; /* Metronic default */
  --fs-body-lg:    16px;
  --fs-small:      13px;
  --fs-xs:         12px;

  --lh-tight: 1.15; /* @kind font */
  --lh-snug:  1.3;  /* @kind font */
  --lh-base:  1.5;  /* @kind font */
  --lh-loose: 1.7;  /* @kind font */

  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---------- SPACING (4-pt scale) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- RADII ---------- */
  /* Brand Guidelines p.13: rounded corners reinforce a friendly tone. */
  --radius-xs: 4px;
  --radius-sm: 6px;     /* Metronic default */
  --radius-md: 10px;    /* buttons, inputs */
  --radius-lg: 16px;    /* cards, photo boxes */
  --radius-xl: 24px;
  --radius-pill: 999px; /* CTA buttons, chips */
  --radius-circle: 50%; /* photographic containers (p.14) */

  /* ---------- ELEVATION ---------- */
  /* Metronic uses soft, low-spread shadows. */
  --shadow-xs: 0 1px 2px rgba(24,28,50,0.04);
  --shadow-sm: 0 2px 6px rgba(24,28,50,0.06);
  --shadow-md: 0 4px 16px rgba(24,28,50,0.08);
  --shadow-lg: 0 12px 32px rgba(24,28,50,0.10);
  --shadow-focus: 0 0 0 3px rgba(3,149,255,0.25); /* brand blue focus ring */

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-narrow: 720px;
  --container:        960px;
  --container-wide:   1240px;
  --sidebar-width:    265px;     /* Metronic aside default */
  --header-height:    65px;      /* Metronic header default */
}

/* ============================================================
   BRAND FONTS (local @font-face — files in ./fonts/)
   Montserrat = display / Libre Franklin = body, per Brand Guidelines p.8
   ============================================================ */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/LibreFranklin-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/LibreFranklin-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/LibreFranklin-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/LibreFranklin-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/LibreFranklin-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* JetBrains Mono = monospace / code (--font-mono) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply by class OR include the element selectors below.
   ============================================================ */

.pi-display-xl, .pi-h0 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.pi-display, h1.pi {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.pi-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.pi-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.pi-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.pi-h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.pi-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.pi-subhead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.pi-body, p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: var(--fg-1);
}

.pi-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
}

.pi-small, small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.pi-caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.pi-pullquote {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 22px;
  line-height: var(--lh-snug);
  color: var(--fg-2);
  font-style: italic;
}

.pi-link, a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.pi-link:hover, a:hover { color: var(--fg-link-hover); text-decoration: underline; }

code, .pi-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--pi-gray-200);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--pi-gray-800);
}