/* ============================================================
   Argon Design System — Colors & Type
   Source: Claude Design "Pixie Ops product requirements"
   (jejernig/argon — Bootstrap 4 + Argon Pro). Imported verbatim
   as the design source of truth for Pixie Ops.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

:root {
  /* ---------- Grayscale (Argon-tuned, blue-leaning) ---------- */
  --white: #ffffff;
  --gray-100: #f6f9fc;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #8898aa;
  --gray-700: #525f7f;
  --gray-800: #32325d;
  --gray-900: #212529;
  --black: #000000;

  /* ---------- Argon brand spectrum ---------- */
  --blue:    #5e72e4;
  --indigo:  #5603ad;
  --purple:  #8965e0;
  --pink:    #f3a4b5;
  --red:     #f5365c;
  --orange:  #fb6340;
  --yellow:  #ffd600;
  --green:   #2dce89;
  --teal:    #11cdef;
  --cyan:    #2bffc6;

  /* ---------- Theme / semantic ---------- */
  --default:   #172b4d;
  --primary:   #5e72e4;
  --secondary: #f4f5f7;
  --success:   #2dce89;
  --info:      #11cdef;
  --warning:   #fb6340;
  --danger:    #f5365c;
  --light:     #adb5bd;
  --dark:      #212529;
  --darker:    #0b0b14;
  --neutral:   #ffffff;

  /* ---------- Surfaces ---------- */
  --bg: var(--white);
  --fg: var(--gray-700);
  --fg-heading: var(--gray-800);
  --fg-muted: var(--gray-600);
  --border: var(--gray-200);
  --input-border: #cad1d7;

  /* ---------- Type ---------- */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-bold: 600;
  --fw-extra-bold: 700;

  --fs-base: 1rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;

  --h1: 2.5rem;
  --h2: 2rem;
  --h3: 1.75rem;
  --h4: 1.5rem;
  --h5: 1.25rem;
  --h6: 1rem;

  --display-1: 3.3rem;
  --display-2: 2.75rem;
  --display-3: 2.1875rem;
  --display-4: 1.6275rem;

  --eyebrow-size: 0.95rem;
  --eyebrow-tracking: 0.025em;

  --lh-base: 1.5;
  --lh-paragraph: 1.7;
  --lh-heading: 1.5;

  /* ---------- Spacing ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6rem;
  --sp-8: 8rem;
  --sp-9: 10rem;

  /* ---------- Radius ---------- */
  --radius-sm: 0.2rem;
  --radius:    0.25rem;
  --radius-lg: 0.3rem;
  --radius-xl: 0.35rem;
  --radius-pill: 10rem;
  --radius-circle: 50%;

  --border-width: 0.0625rem;

  /* ---------- Shadows (Argon's signature soft layered shadow) ---------- */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
  --shadow:    0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);
  --shadow-btn: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-btn-hover: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
  --shadow-dropdown: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
  --shadow-modal: 0 15px 35px rgba(50, 50, 93, .2), 0 5px 15px rgba(0, 0, 0, .17);

  /* ---------- Transitions ---------- */
  --tx-base: all .15s ease;
  --tx-fade: opacity .15s linear;
  --tx-input: all .2s cubic-bezier(.68, -.55, .265, 1.55);

  /* ---------- Z layers ---------- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ---------- Container max widths ---------- */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1040px;

  /* ---------- Argon gradients ---------- */
  --gradient-primary: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  --gradient-info:    linear-gradient(87deg, #11cdef 0, #1171ef 100%);
  --gradient-success: linear-gradient(87deg, #2dce89 0, #2dcecc 100%);
  --gradient-warning: linear-gradient(87deg, #fb6340 0, #fbb140 100%);
  --gradient-danger:  linear-gradient(87deg, #f5365c 0, #f56036 100%);
  --gradient-default: linear-gradient(87deg, #172b4d 0, #1a174d 100%);
}

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: var(--lh-paragraph);
  color: var(--fg);
  background: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
button { cursor: pointer; }

@keyframes ppulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- Cockpit hero band: "pixie-dust night sky" (CD Pixie Ops.dc.html
   lines 59-61) — a dark navy-to-indigo base with two nebula glows and two
   twinkling star fields, replacing the flat --gradient-primary the header band
   used before. Two offset animation timings so the two star layers don't blink
   in lockstep. Kept as reusable classes (not inline @keyframes per-component)
   so any future header/hero surface can opt in the same way. */
.hero-nightsky {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(94,114,228,.35) 0%, rgba(94,114,228,0) 45%),
    radial-gradient(circle at 6% 92%, rgba(17,205,239,.22) 0%, rgba(17,205,239,0) 40%),
    linear-gradient(180deg, #0b1026 0%, #182750 100%);
}
.hero-nightsky .hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-stars--a {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 28% 58%, #fff 100%, transparent),
    radial-gradient(1px 1px at 44% 14%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 63% 70%, #fff 100%, transparent),
    radial-gradient(1px 1px at 77% 30%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, #fff 100%, transparent),
    radial-gradient(1px 1px at 95% 18%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 5% 78%, #fff 100%, transparent),
    radial-gradient(1px 1px at 52% 88%, #fff 100%, transparent);
  animation: potwinkle 4.5s ease-in-out infinite;
}
.hero-stars--b {
  background-image:
    radial-gradient(1px 1px at 20% 40%, #fff 100%, transparent),
    radial-gradient(1px 1px at 36% 82%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 57% 12%, #fff 100%, transparent),
    radial-gradient(1px 1px at 70% 48%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 84% 84%, #fff 100%, transparent),
    radial-gradient(1px 1px at 92% 40%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 15% 6%, #fff 100%, transparent),
    radial-gradient(1px 1px at 48% 62%, #fff 100%, transparent);
  animation: potwinkle 5.5s ease-in-out infinite 1.8s; /* offset so both layers don't blink together */
}
@keyframes potwinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: .95; }
}
/* Respect reduced-motion: keep the night-sky look, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .hero-stars--a, .hero-stars--b { animation: none; opacity: .6; }
}

a { color: var(--primary); text-decoration: none; transition: var(--tx-base); }
a:hover { color: #324cdd; }

/* ============================================================
   Design-sync (Brand Board reconciliation): social brand tokens
   + Argon type utilities present in the SoT colors_and_type.css.
   The app styles inline via the CSS vars above; these complete
   parity with the design source of truth.
   ============================================================ */
:root {
  --facebook: #3b5999; --twitter: #1da1f2; --google-plus: #dd4b39;
  --instagram: #e4405f; --pinterest: #bd081c; --youtube: #cd201f;
  --slack: #3aaf85; --dribbble: #ea4c89; --github: #222222;
}
.heading, .text-uppercase-eyebrow {
  font-size: var(--eyebrow-size); font-weight: var(--fw-bold);
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--fg-heading);
}
.heading-title {
  font-size: 1.375rem; font-weight: var(--fw-bold);
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--fg-heading);
}
.display-1, .display-2, .display-3, .display-4 {
  font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--fg-heading);
}
.display-1 { font-size: var(--display-1); } .display-2 { font-size: var(--display-2); }
.display-3 { font-size: var(--display-3); } .display-4 { font-size: var(--display-4); }
.lead { font-size: 1.25rem; font-weight: var(--fw-light); line-height: 1.7; }
blockquote {
  font-size: 1.25rem; border-left: 3px solid var(--gray-300);
  padding-left: 1rem; color: var(--gray-700);
}
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 87.5%; color: var(--pink); }