/* ============================================================
   Pando · Design Tokens
   Vendored from the Pando design system (fonts repointed to
   assets/fonts/ for this site).
   ============================================================ */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "Comfortaa";
  src: url("../assets/fonts/Comfortaa-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("../assets/fonts/Comfortaa-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("../assets/fonts/Comfortaa-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("../assets/fonts/Comfortaa-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("../assets/fonts/Comfortaa-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("../assets/fonts/FiraSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("../assets/fonts/FiraSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand color ---------- */
  --pando-navy-900: #020C2D;
  --pando-navy-800: #0A1842;
  --pando-navy-700: #14275C;
  --pando-navy-600: #1F3878;
  --pando-navy-500: #2D4A92;

  --pando-yellow-700: #F18D1D;
  --pando-yellow-600: #F2AF19;
  --pando-yellow-500: #FFDF24;
  --pando-yellow-400: #FFE874;
  --pando-yellow-300: #FFEFA0;
  --pando-yellow-200: #FFF5C2;
  --pando-yellow-100: #FFFAE0;
  --pando-yellow-050: #FFFCEF;

  --pando-bark-900: #3A2E22;
  --pando-bark-700: #6B5A45;
  --pando-bark-500: #A2906E;
  --pando-bark-300: #D8C9A8;
  --pando-bark-100: #F0E8D6;

  --pando-stone-900: #1A1F2B;
  --pando-stone-800: #2B3242;
  --pando-stone-700: #424A5D;
  --pando-stone-600: #5F6678;
  --pando-stone-500: #858B9C;
  --pando-stone-400: #9EA2B2;
  --pando-stone-300: #D6D9E1;
  --pando-stone-200: #E7E9EE;
  --pando-stone-100: #F2F3F6;
  --pando-stone-050: #F8F9FB;
  --pando-white:     #FFFFFF;

  --pando-sky-700:   #133E6B;
  --pando-sky-500:   #1C5491;
  --pando-sky-300:   #7FA3CC;
  --pando-sky-100:   #DAE6F4;

  --pando-leaf-700:  #246D24;
  --pando-leaf-500:  #63B523;
  --pando-leaf-300:  #B8E08A;
  --pando-leaf-100:  #DCF4EB;

  /* ---------- Semantic ---------- */
  --fg-1:        var(--pando-navy-900);
  --fg-2:        var(--pando-stone-700);
  --fg-3:        var(--pando-stone-500);
  --fg-invert:   var(--pando-white);

  --bg-canvas:   var(--pando-yellow-050);
  --bg-surface:  var(--pando-white);
  --bg-sunken:   var(--pando-stone-100);
  --bg-dark:     var(--pando-navy-900);
  --bg-dark-2:   var(--pando-navy-800);

  --accent:           var(--pando-yellow-500);
  --accent-hover:     var(--pando-yellow-400);
  --accent-press:     var(--pando-yellow-600);
  --accent-contrast:  var(--pando-navy-900);

  --border-1:      var(--pando-stone-200);
  --border-2:      var(--pando-stone-300);
  --border-strong: var(--pando-navy-900);

  --status-success: #246D24;
  --status-success-soft: #DCF4EB;
  --status-warning: #E0A024;
  --status-warning-soft: #FCEFD0;
  --status-danger:  #C8483A;
  --status-danger-soft: #F8E0DC;
  --status-info:    var(--pando-sky-500);
  --status-info-soft: var(--pando-sky-100);

  --gradient-navy:   radial-gradient(120% 100% at 30% 0%, #14275C 0%, #020C2D 70%);
  --gradient-yellow: linear-gradient(135deg, #FFDF24 0%, #F2AF19 55%, #F18D1D 100%);

  /* ---------- Spacing ---------- */
  --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;
  --space-24: 96px;

  /* ---------- Radius ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(11, 22, 51, 0.06),
              0 1px 1px rgba(11, 22, 51, 0.04);
  --shadow-2: 0 4px 10px rgba(11, 22, 51, 0.07),
              0 2px 4px rgba(11, 22, 51, 0.04);
  --shadow-3: 0 12px 28px rgba(11, 22, 51, 0.10),
              0 4px 10px rgba(11, 22, 51, 0.06);
  --shadow-4: 0 28px 56px rgba(11, 22, 51, 0.16),
              0 10px 20px rgba(11, 22, 51, 0.08);
  --shadow-glow-yellow: 0 12px 30px rgba(255, 223, 36, 0.40);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6),
                  inset 0 -1px 0 rgba(11,22,51,0.04);

  /* ---------- Typography ---------- */
  --font-display: "Comfortaa", "Quicksand", "Nunito", system-ui, sans-serif;
  --font-body:    "Fira Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-xl: 64px;
  --fs-display-lg: 48px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 20px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;

  --lh-tight:   1.12;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.14em;

  /* ---------- Motion ---------- */
  --ease-out-soft:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-page: 520ms;
}