/* ============================================================
   Blueprint AI with Kirk — reset.css
   CSS Reset + Brand Design System Variables
   Load this FIRST on every page.
   ============================================================ */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Poppins:wght@300;400;500;600&display=swap');


/* ══════════════════════════════════════════════════════════════
   BRAND VARIABLES
   ══════════════════════════════════════════════════════════════ */
:root {

  /* ── Core Palette ── */
  --color-void:        #0D1117;   /* Near black — page bg, deep backgrounds   */
  --color-slate:       #1C2B3A;   /* Dark slate — cards, panels                */
  --color-slate-mid:   #253545;   /* Mid slate — subtle elevation               */
  --color-steel:       #3A5068;   /* Steel — borders, dividers                  */
  --color-ice:         #5B9EC9;   /* Icy Blue — primary accent, CTAs            */
  --color-ice-light:   #8BBEDD;   /* Ice light — hover states, tints            */
  --color-ice-pale:    #C0D8EC;   /* Ice pale — very subtle tints               */
  --color-white:       #FFFFFF;   /* Pure white                                 */
  --color-off-white:   #EDF2F7;   /* Off white — light mode bg, light text      */
  --color-mist:        #A8BFCE;   /* Muted text, captions                       */

  /* ── Semantic Tokens ── */
  --bg-page:           var(--color-void);
  --bg-surface:        var(--color-slate);
  --bg-elevated:       var(--color-slate-mid);
  --border-subtle:     rgba(91, 158, 201, 0.15);
  --border-default:    rgba(91, 158, 201, 0.25);
  --border-strong:     rgba(91, 158, 201, 0.5);

  --text-primary:      var(--color-white);
  --text-secondary:    var(--color-mist);
  --text-muted:        rgba(168, 191, 206, 0.55);
  --text-accent:       var(--color-ice);

  --accent-primary:    var(--color-ice);
  --accent-hover:      var(--color-ice-light);
  --accent-glow:       rgba(91, 158, 201, 0.2);

  /* ── Typography ── */
  --font-serif:        'Goudy Bookletter 1911', Georgia, serif;
  --font-sans:         'Poppins', system-ui, sans-serif;

  --text-xs:    0.625rem;   /*  10px */
  --text-sm:    0.75rem;    /*  12px */
  --text-base:  0.9375rem;  /*  15px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.375rem;   /*  22px */
  --text-xl:    1.75rem;    /*  28px */
  --text-2xl:   2.25rem;    /*  36px */
  --text-3xl:   3rem;       /*  48px */
  --text-4xl:   4rem;       /*  64px */
  --text-5xl:   5.5rem;     /*  88px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.9;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.35em;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* ── Spacing ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Layout ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --nav-height:     72px;

  /* ── Borders + Radii ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(91, 158, 201, 0.15);

  /* ── Transitions ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 700ms;
}


/* ══════════════════════════════════════════════════════════════
   BOOTSTRAP THEME OVERRIDES
   These remap Bootstrap 5's own CSS variables to brand palette.
   Bootstrap 5.3+ reads :root custom properties automatically.
   Must come AFTER Bootstrap CSS, BEFORE your component styles.
   ══════════════════════════════════════════════════════════════ */
:root {
  --bs-primary:            #5B9EC9;
  --bs-primary-rgb:        91, 158, 201;
  --bs-secondary:          #3A5068;
  --bs-secondary-rgb:      58, 80, 104;
  --bs-dark:               #0D1117;
  --bs-dark-rgb:           13, 17, 23;
  --bs-light:              #EDF2F7;
  --bs-light-rgb:          237, 242, 247;
  --bs-body-bg:            #0D1117;
  --bs-body-color:         #FFFFFF;
  --bs-body-font-family:   'Poppins', system-ui, sans-serif;
  --bs-link-color:         #5B9EC9;
  --bs-link-hover-color:   #8BBEDD;
  --bs-border-color:       rgba(91, 158, 201, 0.2);
  --bs-border-radius:      12px;
  --bs-border-radius-sm:   6px;
  --bs-border-radius-lg:   20px;
  --bs-border-radius-pill: 9999px;
  --bs-font-sans-serif:    'Poppins', system-ui, sans-serif;
  --bs-btn-border-radius:  9999px;
  --bs-btn-font-size:      0.75rem;
  --bs-btn-font-weight:    500;
}

/* Bootstrap .btn-primary → brand ice blue */
.btn-primary {
  background-color: var(--color-ice) !important;
  border-color:     var(--color-ice) !important;
  color:            var(--color-void) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-ice-light) !important;
  border-color:     var(--color-ice-light) !important;
  box-shadow: 0 4px 24px rgba(91, 158, 201, 0.35) !important;
}

.btn-outline-primary {
  color:        var(--color-ice) !important;
  border-color: var(--color-ice) !important;
}
.btn-outline-primary:hover {
  background-color: var(--color-ice) !important;
  color:            var(--color-void) !important;
}

/* Bootstrap .card → brand surface */
.card {
  background-color: var(--bg-surface) !important;
  border-color:     var(--border-subtle) !important;
  color:            var(--text-primary) !important;
}
.card-header, .card-footer {
  background-color: var(--bg-elevated) !important;
  border-color:     var(--border-subtle) !important;
}

/* Bootstrap form controls → brand style */
.form-control, .form-select {
  background-color: var(--bg-surface) !important;
  border-color:     var(--border-default) !important;
  color:            var(--text-primary) !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-elevated) !important;
  border-color:     var(--color-ice) !important;
  box-shadow: 0 0 0 3px rgba(91, 158, 201, 0.2) !important;
  color:            var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-label { color: var(--text-secondary) !important; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Bootstrap badge */
.badge.bg-primary { background-color: var(--color-ice) !important; color: var(--color-void) !important; }
.badge.bg-secondary { background-color: var(--bg-elevated) !important; color: var(--text-secondary) !important; }

/* Bootstrap modal */
.modal-content {
  background-color: var(--bg-surface) !important;
  border-color:     var(--border-subtle) !important;
  color:            var(--text-primary) !important;
}
.modal-header, .modal-footer { border-color: var(--border-subtle) !important; }

/* Bootstrap navbar — disabled; we use our custom .site-nav instead */
.navbar { display: none !important; }


/* ══════════════════════════════════════════════════════════════
   MODERN CSS RESET
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-page);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

:focus-visible {
  outline: 2px solid var(--color-ice);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: rgba(91, 158, 201, 0.3);
  color: var(--color-white);
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--color-void); }
::-webkit-scrollbar-thumb  { background: var(--color-steel); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-ice); }


/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-10); }
}

@media (min-width: 1280px) {
  .container { padding-inline: var(--space-16); }
}

/* ── Typography helpers ── */
.font-serif     { font-family: var(--font-serif); }
.font-sans      { font-family: var(--font-sans); }
.text-accent    { color: var(--text-accent); }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ── Section spacing ── */
.section    { padding-block: var(--space-24); }
.section-sm { padding-block: var(--space-16); }
.section-lg { padding-block: var(--space-32); }

/* ── Divider ── */
.rule {
  height: 1px;
  background: linear-gradient(to right, var(--color-ice), transparent);
  border: none;
  margin-block: var(--space-8);
}

/* ── Visually hidden (accessibility) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}