/* BorderUX redesign — shared design tokens (deployed on GitHub Pages — content lives in /content/*.md) */

:root {
  /* Default Theme (Dark Mode — the current high-contrast look) */
  --bx-bg: #0D1017;
  --bx-paper: #F4ECDC;
  --bx-ink: #1A1815;
  --bx-ink-2: #3A352D;
  --bx-ink-3: #585247;
  
  --bx-tile-surface: #F8F9FA;
  --bx-tile-surface-2: #F1F3F5;
  --bx-tile-surface-3: #E9ECEF;
  --bx-tile-ink: #1C1E23;
  
  --bx-brand-fg: #FFFFFF;
  --bx-brand-paper: #FFFFFF;
  --bx-brand-ink: #FFFFFF;

  /* Stable dark text variables for light tiles */
  --bx-light-tile-fg: #1C1E23;
  --bx-light-tile-fg-muted: #21242A;
  --bx-light-tile-fg-more-muted: #252830;

  --bx-nav-bg: rgba(15, 13, 10, 0.72);
  --bx-nav-link-color: rgba(248, 249, 250, 0.65);
  --bx-cta-border: rgba(248, 249, 250, 0.45);
  --bx-foot-fg: rgba(248, 249, 250, 0.70);
  --bx-foot-border: rgba(248, 249, 250, 0.18);
  --bx-fg-dim: rgba(248, 249, 250, 0.18);

  /* paper + ink (original variables) */
  --paper: #F8F9FA;
  --paper-deep: #E9ECEF;
  --paper-soft: #FFFFFF;
  --ink: #1C1E23;
  --ink-2: #21242A;
  --ink-3: #252830;
  --rule: rgba(28, 30, 35, 0.14);
  --rule-soft: rgba(28, 30, 35, 0.07);

  /* signature accents (carried from the current site, dialed in) */
  --signal-blue: #597AF7;
  --signal-peach: #FBDBB3;
  --signal-green: #39916B;
  --signal-oxblood: #B42D45;
  --signal-teal: #3E94AA;

  /* density (overridden per-tweak) */
  --gutter: 32px;
  --section: 120px;
  --radius: 4px;

  /* type stacks */
  --font-sans: "Geist", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Geist", "Söhne", "Helvetica Neue", sans-serif;
  --font-editorial: "Söhne Breit", "Geist", "Helvetica Neue", sans-serif;
}

/* per-variation overrides */
.v-editorial {
  --paper: #F4ECDC;
  --ink: #1A1815;
  --accent: var(--signal-blue);
  --font-display: "Geist", "Söhne", sans-serif;
}
.v-studio {
  --paper: #EEE6D3;
  --ink: #1A1010;
  --accent: var(--signal-oxblood);
  --font-display: "Boldonse", "Geist", sans-serif;
}
.v-terminal {
  --paper: #F6F1E7;
  --ink: #14140F;
  --accent: var(--signal-green);
  --font-display: "Geist Mono", "JetBrains Mono", monospace;
}

/* base reset within an artboard */
.bx-page {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.45;
  width: 100%;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.bx-page *,
.bx-page *::before,
.bx-page *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.bx-page * { box-sizing: border-box; }
.bx-page p { margin: 0; text-wrap: pretty; }
.bx-page h1, .bx-page h2, .bx-page h3, .bx-page h4 {
  margin: 0; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance;
}
.bx-page a { color: inherit; text-decoration: none; }
.bx-page hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* utility */
.bx-mono { font-family: var(--font-mono); font-feature-settings: "ss01"; letter-spacing: 0; }
.bx-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bx-dagger { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.8em; vertical-align: super; }

/* nav shared */
.bx-logo { opacity: 0.8; transition: opacity .25s cubic-bezier(0.4, 0, 0.2, 1); }
.bx-logo:hover { opacity: 1; }

.bx-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  z-index: 5;
}
.bx-nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; }
.bx-nav-links a { padding: 6px 0; color: var(--ink-2); transition: color 0.15s ease, text-decoration-color 0.15s ease; text-decoration: underline transparent; text-underline-offset: 4px; }
.bx-nav-links a:hover { color: var(--ink); text-decoration-color: currentColor; }
.bx-nav-separator { display: none; }
.bx-nav .bx-cta {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  padding: 12px 20px; border: 1px solid var(--ink); border-radius: 999px;
  color: var(--ink); background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  transition: opacity .25s cubic-bezier(0.4, 0, 0.2, 1), background-color .25s cubic-bezier(0.4, 0, 0.2, 1), color .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.bx-nav .bx-cta:hover { background: var(--ink); color: var(--paper); opacity: 0.9; }

/* placeholder block (for imagery slots) */
.bx-slot {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(26,24,21,0.06) 14px 15px),
    var(--paper-deep);
  color: var(--ink-3);
  font-family: var(--font-mono); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.bx-slot::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px dashed var(--rule);
}

/* footer shared */
.bx-foot {
  padding: 60px var(--gutter) 32px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}
.bx-foot-grid {
  display: grid; gap: 32px;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  margin-bottom: 48px;
}
.bx-foot h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; font-weight: 500; }
.bx-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bx-foot a { transition: color 0.15s ease, text-decoration-color 0.15s ease; text-decoration: underline transparent; text-underline-offset: 4px; }
.bx-foot a:hover { color: var(--ink); text-decoration-color: currentColor; }
.bx-foot-bottom { display: flex; justify-content: space-between; align-items: baseline; padding-top: 24px; border-top: 1px solid var(--rule); }

/* ── Light Theme Overrides ────────────────────────────────────────────────── */
[data-theme="light"] {
  --bx-bg: #F0F2F6; /* Premium cool off-white with slate tint */
  --bx-paper: #1C1E23; /* Standard text color is now dark slate! */
  --bx-ink: #F8F9FA; /* Light off-white frost */
  --bx-ink-2: #E9ECEF;
  --bx-ink-3: #DEE2E6;
  
  --bx-tile-surface: #FFFFFF; /* Crisp pure white bento cards */
  --bx-tile-surface-2: #E9ECEF; /* Deeper slate for contrast against white */
  --bx-tile-surface-3: #DEE2E6; 
  --bx-tile-ink: #1C1E23; /* Dark slate text */

  --bx-brand-fg: #FFFFFF; /* Maintain white/cream text on dark brand tiles */
  --bx-brand-paper: #FFFFFF;
  --bx-brand-ink: #FFFFFF;

  /* Stable dark text variables for light tiles (do not change based on mode!) */
  --bx-light-tile-fg: #1C1E23;
  --bx-light-tile-fg-muted: #21242A;
  --bx-light-tile-fg-more-muted: #252830;
  
  --bx-accent-text: #B02581; /* High contrast fuchsia/purple for light mode text accents */
  --bx-fg-body: var(--bx-tile-ink); /* Map body text in light mode to charcoal */

  --bx-nav-bg: rgba(245, 245, 245, 0.85); /* glassy warm off-white */
  --bx-nav-link-color: rgba(26, 24, 21, 0.75);
  --bx-cta-border: rgba(26, 24, 21, 0.55);
  --bx-foot-fg: rgba(26, 24, 21, 0.75);
  --bx-foot-border: rgba(26, 24, 21, 0.25);
  --bx-fg-dim: rgba(26, 24, 21, 0.70);
}

/* ── Logo filter in Light Theme ───────────────────────────────────────────── */
[data-theme="light"] .bx-logo {
  filter: invert(0.9) contrast(1.1) brightness(0.9);
}

/* ── Premium Theme Switcher Button ────────────────────────────────────────── */
.bx-theme-toggle {
  background: rgba(244, 236, 220, 0.06);
  border: 1px solid rgba(244, 236, 220, 0.15);
  color: var(--paper);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: background-color 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bx-theme-toggle:hover {
  background: rgba(244, 236, 220, 0.12);
  border-color: rgba(244, 236, 220, 0.3);
  transform: scale(1.05);
}

.bx-theme-toggle:active {
  transform: scale(0.95);
}

[data-theme="light"] .bx-theme-toggle {
  background: rgba(26, 24, 21, 0.05);
  border-color: rgba(26, 24, 21, 0.12);
  color: var(--bx-paper);
}

[data-theme="light"] .bx-theme-toggle:hover {
  background: rgba(26, 24, 21, 0.1);
  border-color: rgba(26, 24, 21, 0.2);
}

.bx-toggle-icon-wrap {
  position: relative;
  width: 20px;
  height: 20px;
}

.bx-sun-icon,
.bx-moon-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bx-sun-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.bx-moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="light"] .bx-sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="light"] .bx-moon-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

/* ── Cookie Banner ───────────────────────────────────────────────────────── */
.bx-cookie-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 380px;
  background: color-mix(in oklab, var(--ink) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklab, var(--paper) 20%, transparent);
  padding: 24px;
  border-radius: var(--radius, 8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 9999;
  font-family: var(--font-sans);
  color: var(--paper);
  animation: cookie-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bx-cookie-title {
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.bx-cookie-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  margin: 0 0 18px;
}

.bx-cookie-text a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.bx-cookie-text a:hover {
  opacity: 0.7;
}

.bx-cookie-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border: 1px solid var(--paper);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition: opacity 0.25s, transform 0.15s;
}

.bx-cookie-btn:hover {
  opacity: 0.85;
}

.bx-cookie-btn:active {
  transform: scale(0.96);
}

@keyframes cookie-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .bx-cookie-banner {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

/* Responsive Nav Header and Footer Breakpoints */
.bx-contact-icon { display: none; }
.bx-contact-text { display: inline; }

@media (max-width: 900px) {
  .bx-nav {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 16px 16px !important;
    padding: 16px 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bx-nav > a:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }
  .bx-nav-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: auto !important;
  }
  .bx-nav-links {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px 14px !important;
    margin: 8px 0 0 !important;
    font-size: 13px !important;
  }
  .bx-nav-links a {
    white-space: nowrap !important;
  }
  .bx-nav-separator {
    display: inline-block !important;
    color: var(--bx-fg-dim, rgba(244, 236, 220, 0.3)) !important;
    font-size: 14px !important;
    user-select: none !important;
    pointer-events: none !important;
    transform: translateY(-2px) !important;
  }
  [data-theme="light"] .bx-nav-separator {
    color: rgba(26, 24, 21, 0.25) !important;
  }
  .bx-contact-text {
    display: none !important;
  }
  .bx-contact-icon {
    display: inline-block !important;
  }
  .bx-nav-contact-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(244, 236, 220, 0.06) !important;
    border: 1px solid rgba(244, 236, 220, 0.15) !important;
    color: var(--paper) !important;
    transition: background-color 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }
  [data-theme="light"] .bx-nav-contact-btn {
    background: rgba(26, 24, 21, 0.05) !important;
    border-color: rgba(26, 24, 21, 0.12) !important;
    color: var(--bx-paper) !important;
  }
  .bx-nav-contact-btn:hover {
    background: rgba(244, 236, 220, 0.12) !important;
    border-color: rgba(244, 236, 220, 0.3) !important;
    transform: scale(1.05) !important;
  }
  [data-theme="light"] .bx-nav-contact-btn:hover {
    background: rgba(26, 24, 21, 0.1) !important;
    border-color: rgba(26, 24, 21, 0.2) !important;
  }
  .bx-nav-contact-btn:active {
    transform: scale(0.95) !important;
  }
}

@media (max-width: 880px) {
  .bx-foot-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bx-foot-grid > div:first-child,
  .bx-foot-grid > li:first-child,
  .bx-foot-grid > ul:first-child {
    grid-column: span 2;
    margin-bottom: 16px;
  }
}

@media (max-width: 820px) {
  .bx-foot-bottom {
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }
  .bx-foot-bottom > div {
    justify-content: center;
  }
}

.bx-foot-hr { display: none; }

@media (max-width: 600px) {
  .bx-foot-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bx-foot-grid > div:first-child,
  .bx-foot-grid > li:first-child,
  .bx-foot-grid > ul:first-child {
    grid-column: span 1;
    margin-bottom: 8px;
  }
  .bx-foot-hr {
    display: block !important;
    border: 0 !important;
    border-top: 1px solid var(--rule) !important;
    margin: 20px 0 !important;
    width: 100% !important;
    order: 98 !important;
  }
  .bx-foot-grid > div,
  .bx-foot-grid > div ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .bx-foot-intro {
    order: 99 !important;
  }
  .bx-foot-intro p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  .bx-nav {
    padding: 16px 16px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 16px 16px !important;
  }
  .bx-nav-links {
    gap: 8px 12px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 400px) {
  .bx-nav-links {
    gap: 6px 8px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 900px) {
  .site-page .bx-foot,
  .vrect .bx-foot {
    margin-top: 20px !important;
    padding-top: 32px !important;
  }
  .sp-frame,
  .vrect-frame {
    padding-bottom: 24px !important;
  }
}