/* ============================================================
   VESTIMA · brand tokens
   Primary: Vestima Blue (deep navy)
   Typography: Inter Tight (display) + DM Sans (body)
   ============================================================ */

:root {
  /* ===== PRIMARY · Vestima Blue ===== */
  --primary-100: #E8ECEF;
  --primary-200: #D2DAE0;
  --primary-300: #A6B5C1;
  --primary-400: #7991A2;
  --primary-500: #4D6C83;
  --primary-600: #204764;   /* default */
  --primary-700: #1A3950;
  --primary-800: #132B3C;   /* deep navy */

  /* ===== SECONDARY · Vestima White ===== */
  --secondary-100: #FFFFFF;
  --secondary-200: #FAFBFB;
  --secondary-300: #F5F6F7;
  --secondary-400: #F0F2F3;
  --secondary-500: #EBEDEF;
  --secondary-600: #E6E9EB;
  --secondary-700: #B8BABC;
  --secondary-800: #8A8C8D;

  /* ===== TERTIARY · Vestima Grey ===== */
  --tertiary-100: #E6E9EB;
  --tertiary-200: #B5B9BB;
  --tertiary-300: #9DA2A5;
  --tertiary-400: #848A8F;
  --tertiary-500: #6C7379;
  --tertiary-600: #545C63;
  --tertiary-700: #3B454C;
  --tertiary-800: #0A161F;

  /* ===== STATE ===== */
  --warning-100: #FCF5E5; --warning-500: #EAB333; --warning-600: #E5A000; --warning-700: #B78000;
  --alert-100:   #F8E7E6; --alert-500:   #CC3F3D; --alert-600:   #C00F0C; --alert-700:   #9A0C0A;
  --success-100: #E5F4ED; --success-500: #33AD74; --success-600: #009951; --success-700: #007A41;

  /* ===== SEMANTIC · Light mode ===== */
  --surface-page:    #FFFFFF;
  --surface-raised:  #FAFBFB;
  --surface-sunken:  #F5F6F7;
  --surface-tint:    #F0F2F3;
  --surface-dark:    var(--primary-800);

  --text-heading:    var(--primary-800);
  --text-body:       var(--tertiary-700);
  --text-muted:      var(--tertiary-500);
  --text-subtle:     var(--tertiary-400);
  --text-on-dark:    #FFFFFF;
  --text-on-dark-muted: #A6B5C1;

  --line:        rgba(19,43,60,0.08);
  --line-strong: rgba(19,43,60,0.16);
  --line-on-dark: rgba(255,255,255,0.10);

  /* ===== ACCENT (subtle — used sparingly for highlights) ===== */
  --accent:      var(--primary-600);
  --accent-soft: var(--primary-100);

  /* ===== SHADOW ===== */
  --shadow-xs: 0 1px 2px rgba(19,43,60,0.04);
  --shadow-sm: 0 2px 6px rgba(19,43,60,0.05), 0 1px 2px rgba(19,43,60,0.04);
  --shadow-md: 0 8px 24px -8px rgba(19,43,60,0.10), 0 2px 6px rgba(19,43,60,0.04);
  --shadow-lg: 0 20px 50px -18px rgba(19,43,60,0.18), 0 4px 12px rgba(19,43,60,0.06);
  --shadow-navy: 0 30px 60px -24px rgba(19,43,60,0.35);

  /* ===== RADIUS (from token spec) ===== */
  --r-xxs: 2px;
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;

  /* ===== TYPE ===== */
  --font-heading: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ===== LAYOUT ===== */
  --max-w: 1440px;
  --gutter: 48px;

  /* ===== EASING ===== */
  --e-out:    cubic-bezier(.2,.8,.2,1);
  --e-in-out: cubic-bezier(.65,0,.35,1);
}

/* BASE */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--surface-page); color: var(--text-body); }
body { background: transparent; color: var(--text-body); }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
h4, h5, h6 { font-weight: 500; letter-spacing: -0.015em; }

p { color: var(--text-body); text-wrap: pretty; font-family: var(--font-body); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--primary-800); color: var(--secondary-100); }

:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Page transition overlay — slide up to cover, slide down to reveal
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  transform: translateY(100%);
  background: linear-gradient(180deg, var(--primary-500) 0%, var(--primary-700) 55%, var(--primary-800) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.page-transition .pt-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .4s ease .1s, transform .5s cubic-bezier(.2,.8,.2,1) .1s;
}
.page-transition .pt-logo img {
  height: 64px;
  width: auto;
  /* invert black logo → white for dark overlay */
  filter: brightness(0) invert(1);
}
.page-transition.covering { transform: translateY(0); pointer-events: all; }
.page-transition.covering .pt-logo,
.page-transition.anim-up .pt-logo { opacity: 1; transform: translateY(0) scale(1); }

.page-transition.anim-up    { animation: pt-up    0.22s cubic-bezier(.7,0,.3,1) forwards; pointer-events: all; }
.page-transition.anim-down  { animation: pt-down  0.28s cubic-bezier(.6,.05,.25,1) forwards; }
@keyframes pt-up   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pt-down { from { transform: translateY(0); }    to { transform: translateY(-100%); } }

/* subtle hold on the outgoing page content while cover rises.
   NOTE: header uses transform: translateX(-50%) to center — don't override it.
   Apply squeeze only to main + footer. Header just fades via opacity. */
body.pt-squeezing main,
body.pt-squeezing .site-footer {
  animation: pt-squeeze 0.42s cubic-bezier(.7,0,.3,1) forwards;
}
body.pt-squeezing .site-header {
  animation: pt-header-fade 0.42s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes pt-squeeze {
  0%   { transform: scale(1); opacity: 1; filter: blur(0); }
  100% { transform: scale(0.97); opacity: 0.35; filter: blur(3px); }
}
@keyframes pt-header-fade {
  0%   { opacity: 1; filter: blur(0); }
  100% { opacity: 0.25; filter: blur(3px); }
}
/* While incoming transition is active, hide content and show covered overlay — NO flash */
html.pt-incoming body > *:not(.page-transition):not(script) { visibility: hidden; }
html.pt-incoming .page-transition { transform: translateY(0) !important; pointer-events: all; display: flex; }
html.pt-incoming .page-transition .pt-logo { opacity: 1 !important; transform: translateY(0) scale(1) !important; }

/* Reserve scrollbar space so content doesn't shift right when overlay covers */
html { scrollbar-gutter: stable; scrollbar-color: var(--tertiary-300) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--tertiary-300); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Ambient page background — ticker revealed only near cursor
   ============================================================ */
/* Base layer: soft paper gradient (replaces old grid lines) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 15% 12%, rgba(166,181,193,0.16), transparent 55%),
    radial-gradient(ellipse at 85% 35%, rgba(210,218,224,0.20), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(121,145,162,0.12), transparent 60%);
  pointer-events: none;
}
/* Very soft pale-blue halo under the cursor */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    110px circle at var(--mx, 50%) var(--my, 30%),
    rgba(166, 181, 193, 0.12),
    rgba(210, 218, 224, 0.05) 55%,
    transparent 100%
  );
}

/* Page-wide ticker layer — revealed only near cursor */
#page-ticker {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(
    110px circle at var(--mx, 50%) var(--my, 30%),
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.3) 55%,
    transparent 100%
  );
          mask-image: radial-gradient(
    110px circle at var(--mx, 50%) var(--my, 30%),
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.3) 55%,
    transparent 100%
  );
}
#page-ticker .tk-row {
  display: flex;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  padding: 6px 0;
  will-change: transform;
}
#page-ticker .tk-row:nth-child(odd)  { animation: pt-scroll-l 90s linear infinite; }
#page-ticker .tk-row:nth-child(even) { animation: pt-scroll-r 110s linear infinite; }
#page-ticker .tk-row:nth-child(3n)   { animation-duration: 75s; }
#page-ticker .tk-row:nth-child(5n)   { animation-duration: 130s; }
@keyframes pt-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pt-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

#page-ticker .tk-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: rgba(70, 90, 110, 0.55);
}
#page-ticker .tk-sym { color: rgba(40, 60, 80, 0.85); font-weight: 600; letter-spacing: 0.04em; }
#page-ticker .tk-px  { color: rgba(60, 80, 100, 0.75); font-variant-numeric: tabular-nums; min-width: 54px; text-align: right; }
#page-ticker .tk-chg { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; transition: color .15s, background .25s; padding: 1px 5px; border-radius: 3px; }
#page-ticker .tk-chg.up   { color: #1a8a4a; }
#page-ticker .tk-chg.down { color: #c73838; }
#page-ticker .tk-chg.flash-up   { background: rgba(60, 180, 110, 0.22); color: #0c6a34; }
#page-ticker .tk-chg.flash-down { background: rgba(210, 70, 70, 0.22);  color: #8a1a1a; }