/* ============================================================================
   Second Design System — colors_and_type.css
   ----------------------------------------------------------------------------
   Brand tokens for second.tech. Mostly monochrome with red / yellow / blue
   pops. DM Sans for everything. Light + dark mode via [data-theme="dark"].

   Load order: this file → component CSS. Components should ONLY consume the
   semantic tokens (fg, bg, h1, code, etc) — never raw colors.
   ========================================================================= */

/* ---- Fonts -------------------------------------------------------------- */
/* Primary: DM Sans (open-source via Google Fonts — fonts/ has TTFs).
   Monospace: JetBrains Mono for technical content. Both shipped locally. */

:root {
  /* ---- Raw palette ------------------------------------------------------ */
  --color-black-hole:  #060606;   /* deepest black, brand glyphs / dark mode bg */
  --color-body-text:   #242424;   /* 90% of all body type */
  --color-white:       #FFFFFF;
  --color-off-white:   #FEFEFE;   /* fractionally off-true-white, common surface */
  --color-paper:       #F9F9F9;   /* alt section surface */
  --color-fog:         #F2F2F2;   /* alt section surface, deeper */
  --color-cloud:       #F7F5F6;   /* warm-leaning alt */
  --color-grey-line:   #EDEDED;   /* hairline borders, chips */
  --color-grey-hover:  #E5E5E5;   /* hover bg on light */
  --color-grey-disabled: #D9D9D9;
  --color-placeholder: #BCBCBC;   /* placeholder text */
  --color-mid-grey:    #787774;   /* captions, secondary text */
  --color-charcoal:    #444444;
  --color-deep-grey:   #111413;   /* near-black diagram strokes */

  /* Primary accents (from brand brief) */
  --color-blue:        #3D8AFB;
  --color-red:         #FA1336;
  --color-yellow:      #F6D032;

  /* Secondary accents */
  --color-purple:      #6F2DBD;
  --color-green:       #43B929;
  --color-orange:      #F4931B;

  /* Accent variants used in real assets (slight figma drift; kept for fidelity) */
  --color-red-alert:   #EA102C;   /* tree-diagram timelock-relative */
  --color-red-deep:    #F6132E;   /* alt red in diagrams */
  --color-blue-stroke: #3E88F9;   /* diagram strokes */

  /* ---- Semantic colors — light mode (default) -------------------------- */
  --bg:                var(--color-white);
  --bg-alt:            var(--color-paper);
  --bg-alt-2:          var(--color-fog);
  --bg-inverse:        var(--color-black-hole);
  --bg-elevated:       var(--color-white);
  --bg-hover:          var(--color-grey-line);
  --bg-pressed:        var(--color-grey-hover);
  --bg-code:           var(--color-fog);

  --fg:                var(--color-black-hole);  /* fg1 — headings, brand glyphs */
  --fg-body:           var(--color-body-text);   /* fg2 — body type */
  --fg-muted:          var(--color-mid-grey);    /* fg3 — captions, secondary */
  --fg-placeholder:    var(--color-placeholder);
  --fg-disabled:       var(--color-placeholder);
  --fg-inverse:        var(--color-white);
  --fg-link:           var(--color-black-hole);
  --fg-link-hover:     var(--color-blue);

  --border:            var(--color-grey-line);   /* default hairline */
  --border-strong:     var(--color-black-hole);
  --border-active:     var(--color-black-hole);
  --border-focus:      var(--color-black-hole);  /* always black-hole, never colored */

  /* Status / semantic */
  --status-info:       var(--color-blue);
  --status-success:    var(--color-green);
  --status-warning:    var(--color-yellow);
  --status-danger:     var(--color-red);

  /* Brand signature gradient — slow rolling on CTA hover (linear so it loops) */
  --brand-gradient:    linear-gradient(
                          90deg,
                          var(--color-red) 0%,
                          var(--color-yellow) 50%,
                          var(--color-blue) 100%
                       );

  /* ---- Type ------------------------------------------------------------- */
  --font-sans:    "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
  --font-display: "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — sizes designed to feel slabby and confident */
  --fs-display-xl: 112px;
  --fs-display:    80px;
  --fs-h1:         64px;
  --fs-h2:         40px;
  --fs-h3:         28px;
  --fs-h4:         22px;
  --fs-h5:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-micro:      12px;

  --lh-display:    1.05;
  --lh-heading:    1.15;
  --lh-body:       1.6;
  --lh-tight:      1.3;
  --lh-code:       1.5;

  --tracking-display: -0.01em;
  --tracking-heading: 0.005em;
  --tracking-body:     0em;
  --tracking-caps:     0.04em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ---- Spacing scale (4-base) ------------------------------------------ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-0:   0;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  /* The brand is flat. Use shadows ONLY when something is genuinely floating
     above the page. Two values total — anything else is a smell.            */
  --shadow-none:    none;
  --shadow-popover: 0 8px 24px rgba(6, 6, 6, 0.08);   /* menus, tooltips, dropdowns */
  --shadow-modal:   0 24px 64px rgba(6, 6, 6, 0.18);  /* dialogs, sheets */

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear:    linear;
  --dur-hover:      150ms;
  --dur-press:      200ms;
  --dur-panel:      300ms;
  --dur-reveal:     700ms;
  --dur-ambient:    8s;          /* the slow rolling gradient */

  /* ---- Diagram tokens (used by tree/transaction diagrams) -------------- */
  --diagram-stroke:        var(--color-deep-grey);
  --diagram-stroke-w:      1.5px;
  --diagram-node-bg:       var(--color-white);
  --diagram-node-header:   var(--color-fog);
  --diagram-node-border:   var(--color-black-hole);
  --diagram-rail:          var(--color-grey-line);
  --diagram-actor-alice:   var(--color-red);
  --diagram-actor-bob:     var(--color-blue);
  --diagram-actor-server:  var(--color-green);
}

/* ============================================================================
   Dark mode
   ========================================================================= */
[data-theme="dark"] {
  --bg:                var(--color-black-hole);
  --bg-alt:            #0D0D0D;
  --bg-alt-2:          #141414;
  --bg-inverse:        var(--color-white);
  --bg-elevated:       #0D0D0D;
  --bg-hover:          rgba(255, 255, 255, 0.06);
  --bg-pressed:        rgba(255, 255, 255, 0.10);
  --bg-code:           #141414;

  --fg:                var(--color-white);
  --fg-body:           #EDEDED;
  --fg-muted:          #9A9A98;
  --fg-placeholder:    #555555;
  --fg-disabled:       #444444;
  --fg-inverse:        var(--color-black-hole);
  --fg-link:           var(--color-white);
  --fg-link-hover:     var(--color-blue);

  --border:            rgba(255, 255, 255, 0.08);
  --border-strong:     var(--color-white);
  --border-active:     var(--color-white);

  --shadow-popover:    0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-modal:      0 24px 64px rgba(0, 0, 0, 0.6);

  --diagram-stroke:    #EDEDED;
  --diagram-node-bg:   #0D0D0D;
  --diagram-node-header: #1A1A1A;
  --diagram-node-border: var(--color-white);
  --diagram-rail:      rgba(255, 255, 255, 0.12);
}

/* ============================================================================
   Reset bits — minimal, font + box-sizing
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11"; /* DM Sans alts */
}

/* ============================================================================
   Semantic type primitives — use these directly: h1, h2, code, .caption, etc.
   ========================================================================= */
.display-xl, .display,
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-black);
}
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-black);
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  font-weight: var(--weight-bold);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: var(--weight-bold);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: var(--weight-bold);
}
h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  font-weight: var(--weight-bold);
}
h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  font-weight: var(--weight-bold);
}

p, .body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  color: var(--fg-muted);
}
.micro {
  font-size: var(--fs-micro);
  line-height: var(--lh-tight);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}
.eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--weight-semibold);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-hover) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

code, kbd, samp, pre, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  line-height: var(--lh-code);
}
code, .code {
  background: var(--bg-code);
  border-radius: var(--radius-sm);
  padding: 0.12em 0.36em;
  color: var(--fg);
}
pre {
  background: var(--bg-code);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--border);
}
pre code {
  background: transparent;
  padding: 0;
}

/* Tabular numerals for sats, fees, balances */
.tnum, .figure {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================================
   Brand gradient — lava-lamp of red / yellow / blue pools
   ----------------------------------------------------------------------------
   The brand's signature gradient is NOT a horizontal linear roll. It's three
   pools of pure red, yellow and blue, drifting independently in 2D. The pools
   are kept mostly-pure with hard radial cutoffs so the mixing zones don't
   muddy into purple/orange/green.

   Usage:
     <span class="brand-gradient-surface"></span>   // ambient on any surface
     <button class="btn-brand">Get started</button> // CTA hover handler

   The pools live in three layered radial-gradients on the same element; each
   pool has its own keyframe animation with a different duration/phase so the
   overall composition never repeats and feels organic.
   ========================================================================= */
/* The surface uses 3 real child divs (not pseudo-elements) because some
   rendering tools don't handle ::before/::after consistently with mix-blend.  */
.brand-gradient-surface {
  position: relative;
  isolation: isolate;
  background-color: var(--color-black-hole);
  overflow: hidden;
}
/* Each pool wrapper rotates around the surface centre at constant linear
   speed; its ::before is offset from the rotation center, tracing a perfect
   circle. Different durations + different orbit radii = independent motion
   that never aligns. Each blob feathers from solid to transparent, so where
   one blob's edge is, the next blob beneath shows through cleanly. */
.brand-gradient-surface > .brand-pool-red,
.brand-gradient-surface > .brand-pool-yellow,
.brand-gradient-surface > .brand-pool-blue {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.brand-gradient-surface > .brand-pool-red::before,
.brand-gradient-surface > .brand-pool-yellow::before,
.brand-gradient-surface > .brand-pool-blue::before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  border-radius: 50%;
  filter: blur(28px);
}
.brand-gradient-surface > .brand-pool-red {
  animation-name: orbit-red;
  animation-duration: 28s;
}
.brand-gradient-surface > .brand-pool-red::before {
  background: radial-gradient(circle, var(--color-red) 0%, var(--color-red) 38%, rgba(250,19,54,0) 75%);
  transform: translate(20%, 0%);
}
.brand-gradient-surface > .brand-pool-yellow {
  animation-name: orbit-yellow;
  animation-duration: 24s;
  animation-direction: reverse;
}
.brand-gradient-surface > .brand-pool-yellow::before {
  background: radial-gradient(circle, var(--color-yellow) 0%, var(--color-yellow) 38%, rgba(246,208,50,0) 75%);
  transform: translate(0%, 22%);
}
.brand-gradient-surface > .brand-pool-blue {
  animation-name: orbit-blue;
  animation-duration: 32s;
}
.brand-gradient-surface > .brand-pool-blue::before {
  background: radial-gradient(circle, var(--color-blue) 0%, var(--color-blue) 38%, rgba(61,138,251,0) 75%);
  transform: translate(-25%, -8%);
}
.brand-gradient-surface > :not([class*="brand-pool"]) {
  position: relative;
  z-index: 2;
}

/* Each pool orbits via a pure rotation of its wrapper. Constant linear speed,
   never any directional reversal, never any sharp change in motion. */
@keyframes orbit-red {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-yellow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-blue {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Static fallback gradient (for tint chips, text fills) — kept linear so the
   three pure hues read clearly. */
.brand-gradient-bg {
  background: linear-gradient(
    90deg,
    var(--color-red) 0%, var(--color-red) 30%,
    var(--color-yellow) 50%, var(--color-yellow) 60%,
    var(--color-blue) 75%, var(--color-blue) 100%
  );
}
.brand-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-black-hole);
  color: #FFFFFF;
}
.btn-brand .brand-pool-red,
.btn-brand .brand-pool-yellow,
.btn-brand .brand-pool-blue {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.btn-brand .brand-pool-red::before,
.btn-brand .brand-pool-yellow::before,
.btn-brand .brand-pool-blue::before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  border-radius: 50%;
  filter: blur(14px);
}
.btn-brand .brand-pool-red {
  animation-name: orbit-red;
  animation-duration: 28s;
}
.btn-brand .brand-pool-red::before {
  background: radial-gradient(circle, var(--color-red) 0%, var(--color-red) 38%, rgba(250,19,54,0) 75%);
  transform: translate(20%, 0%);
}
.btn-brand .brand-pool-yellow {
  animation-name: orbit-yellow;
  animation-duration: 24s;
  animation-direction: reverse;
}
.btn-brand .brand-pool-yellow::before {
  background: radial-gradient(circle, var(--color-yellow) 0%, var(--color-yellow) 38%, rgba(246,208,50,0) 75%);
  transform: translate(0%, 22%);
}
.btn-brand .brand-pool-blue {
  animation-name: orbit-blue;
  animation-duration: 32s;
}
.btn-brand .brand-pool-blue::before {
  background: radial-gradient(circle, var(--color-blue) 0%, var(--color-blue) 38%, rgba(61,138,251,0) 75%);
  transform: translate(-25%, -8%);
}
.btn-brand:hover .brand-pool-red,
.btn-brand:hover .brand-pool-yellow,
.btn-brand:hover .brand-pool-blue { opacity: 1; }
.btn-brand > :not([class*="brand-pool"]) { position: relative; z-index: 1; }

/* Focus ring — always visible, accessible */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection {
  background: var(--color-yellow);
  color: var(--color-black-hole);
}