/* Narrio design tokens — shared by all 3 homepage variants
   Locked palette from current site; sharpened for editorial direction.
   Light/dark via [data-theme] on artboard root. */

:root, [data-theme="dark"] {
  /* Surfaces */
  --bg:        #09090A;
  --bg-1:      #0E0E10;
  --bg-2:      #141416;
  --bg-3:      #1A1A1D;
  --bg-4:      #21212A;

  /* Borders — hairlines */
  --bd:        rgba(255,255,255,.065);
  --bd-hi:     rgba(255,255,255,.13);
  --bd-ac:     rgba(232,224,208,.18);

  /* Text */
  --t1:        #F2F2F0;
  --t2:        #9A9A98;
  --t3:        #6A6A68;
  --t4:        #3F3F3D;

  /* Accent — parchment (default). Tweaks override --ac live. */
  --ac:        #E8E0D0;
  --ac-d:      rgba(232,224,208,.08);
  --ac-b:      rgba(232,224,208,.16);
  --ac-fg:     #080808;

  /* Status */
  --green:     #4ADE80;  --green-d: rgba(74,222,128,.10);  --green-b: rgba(74,222,128,.18);
  --amber:     #FBB040;  --amber-d: rgba(251,176,64,.10);  --amber-b: rgba(251,176,64,.18);
  --red:       #F87171;  --red-d:   rgba(248,113,113,.10);
  --blue:      #60A5FA;  --blue-d:  rgba(96,165,250,.10);  --blue-b:  rgba(96,165,250,.18);
  --purple:    #A78BFA;  --purple-d:rgba(167,139,250,.10);
  --teal:      #2DD4BF;  --teal-d:  rgba(45,212,191,.10);

  /* Type */
  --f-display: 'GT Sectra', 'Tiempos Headline', 'New York', 'Source Serif Pro', Georgia, serif;
  --f-text:    'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', monospace;

  --r:   10px;
  --r-lg: 14px;
}

[data-theme="light"] {
  --bg:        #FBF9F4;
  --bg-1:      #F5F2EA;
  --bg-2:      #EFEAE0;
  --bg-3:      #E8E2D4;
  --bg-4:      #DBD3C1;

  --bd:        rgba(20,18,14,.08);
  --bd-hi:     rgba(20,18,14,.16);
  --bd-ac:     rgba(60,52,40,.22);

  --t1:        #14120E;
  --t2:        #4A4640;
  --t3:        #6F6A60;
  --t4:        #9F9A8E;

  --ac:        #2B2620;
  --ac-d:      rgba(43,38,32,.06);
  --ac-b:      rgba(43,38,32,.14);
  --ac-fg:     #FBF9F4;

  --green:     #2C8A55;  --green-d: rgba(44,138,85,.10);  --green-b: rgba(44,138,85,.20);
  --amber:     #B97309;  --amber-d: rgba(185,115,9,.10);  --amber-b: rgba(185,115,9,.20);
  --red:       #B83232;  --red-d:   rgba(184,50,50,.10);
  --blue:      #2A6FDB;  --blue-d:  rgba(42,111,219,.10); --blue-b:  rgba(42,111,219,.18);
  --purple:    #6E4FC9;  --purple-d:rgba(110,79,201,.10);
  --teal:      #117C72;  --teal-d:  rgba(17,124,114,.10);
}

/* Reset scoped to artboard contents */
.narrio-art *, .narrio-art *::before, .narrio-art *::after { box-sizing: border-box; }
.narrio-art {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--f-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.narrio-art a { color: inherit; text-decoration: none; }
.narrio-art button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.narrio-art h1,.narrio-art h2,.narrio-art h3,.narrio-art h4,.narrio-art p { margin: 0; }
.narrio-art .mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1, "ss01" 1; }
.narrio-art .num  { font-variant-numeric: tabular-nums; }
.narrio-art .lbl  {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t3);
}
.narrio-art ::selection { background: var(--ac-b); color: var(--t1); }

/* Buttons — shared across variants */
.narrio-art .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.narrio-art .btn-pri { background: var(--ac); color: var(--ac-fg); }
.narrio-art .btn-pri:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,224,208,.18); }
.narrio-art .btn-ghost { color: var(--t1); border: .5px solid var(--bd-hi); }
.narrio-art .btn-ghost:hover { border-color: var(--ac); color: var(--ac); }

/* Hairline divider */
.narrio-art .hr { height: .5px; background: var(--bd); width: 100%; }

/* Frame: each variant homepage occupies the whole artboard */
.narrio-art .frame {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.narrio-art .frame::-webkit-scrollbar { width: 0; }

/* "ILLUSTRATIVE" badge — must accompany every dollar/range claim */
.narrio-art .illu {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t3);
  padding: 2px 7px;
  border: .5px solid var(--bd-hi);
  border-radius: 999px;
  white-space: nowrap;
}

/* Common ticker pulse */
@keyframes pulse-dot { 0%,60%{opacity:1;} 80%,100%{opacity:.3;} }
.narrio-art .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green);
  animation: pulse-ring 1.6s ease-out infinite;
}
@keyframes pulse-ring {
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.5);}
  70%{box-shadow:0 0 0 8px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}