/* =============================================================
 * PAN Network — Colors & Type Tokens
 *
 * Inferred system. The brand only shipped logos; the visual
 * direction below was derived from:
 *   • the two-tone (light/dark hemisphere) mark
 *   • the "Agent-to-Agent" / on-chain payments positioning
 *   • the technical, infrastructure-product category
 *
 * Mode: dark-first. The product surface is the canonical view;
 * a light surface exists for marketing/docs and inverts cleanly.
 * ============================================================= */

/* ---------- Webfonts ---------- */
/* PAN's brand face is Montserrat Alternates (geometric sans with
   alternate single-story forms). JetBrains Mono is paired as the
   technical mono — confirm if PAN has a different mono in mind. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===========================================================
   * COLOR — Raw scale
   * Strictly monochrome base with a single signal accent.
   * The mark is pure black/white; we honor that and reserve
   * color for state + signal only.
   * =========================================================== */

  /* Neutrals — warm-cool balanced, slight green undertone so
     they don't read as "iOS grey" */
  --pan-ink-0:   #000000;
  --pan-ink-50:  #08090A;   /* product canvas */
  --pan-ink-100: #0E1012;   /* primary surface */
  --pan-ink-200: #15181B;   /* raised surface / card */
  --pan-ink-300: #1E2226;   /* hover surface */
  --pan-ink-400: #2A2F34;   /* border / divider on dark */
  --pan-ink-500: #4A5058;   /* muted text on dark */
  --pan-ink-600: #6E747B;   /* secondary text on dark */
  --pan-ink-700: #9CA1A6;   /* tertiary text on dark */
  --pan-ink-800: #C9CCD0;   /* high-emphasis on dark (secondary) */
  --pan-ink-900: #E8EAEC;   /* primary text on dark */
  --pan-ink-950: #FAFAFA;   /* pure / wordmark on dark */
  --pan-ink-1000: #FFFFFF;

  /* Signal — single warm brand accent.
     Amber-orange echoes the canonical orange field the mark lives on
     and signals "executed / on-chain / confirmed" — reads well on
     both deep black and off-white. */
  --pan-signal:        #F5A623;
  --pan-signal-dim:    #C2811A;
  --pan-signal-soft:   rgba(245, 166, 35, 0.16);
  --pan-signal-faint:  rgba(245, 166, 35, 0.07);

  /* Semantic — keep narrow. Crypto products earn trust through
     restraint; avoid the gradient/jewel palette common to the
     space. */
  --pan-success: #6EE787;   /* tx confirmed */
  --pan-warn:    #F0B429;   /* pending / network warning */
  --pan-danger:  #FF5454;   /* failed / reverted */
  --pan-info:    #7FB7FF;   /* informational / inspector */

  /* ===========================================================
   * SEMANTIC — Dark mode (canonical)
   * Reference these in components, never the raw scale.
   * =========================================================== */
  --bg-canvas:      var(--pan-ink-50);
  --bg-surface:     var(--pan-ink-100);
  --bg-raised:      var(--pan-ink-200);
  --bg-hover:       var(--pan-ink-300);
  --bg-pressed:     var(--pan-ink-400);
  --bg-inverse:     var(--pan-ink-950);

  --fg-primary:     var(--pan-ink-950);
  --fg-secondary:   var(--pan-ink-800);
  --fg-tertiary:    var(--pan-ink-700);
  --fg-muted:       var(--pan-ink-600);
  --fg-disabled:    var(--pan-ink-500);
  --fg-inverse:     var(--pan-ink-100);
  --fg-accent:      var(--pan-signal);

  --border-hairline:  var(--pan-ink-400);
  --border-default:   var(--pan-ink-400);
  --border-strong:    var(--pan-ink-500);
  --border-focus:     var(--pan-signal);

  --link:           var(--pan-ink-950);
  --link-hover:     var(--pan-signal);

  /* ===========================================================
   * TYPE — Families
   * =========================================================== */
  --font-sans:   "Montserrat Alternates", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: var(--font-sans); /* PAN uses one family — weight & tracking carry hierarchy */

  /* Scale — modular, optimized for technical density.
     Mobile/UI minimum is 13px (--text-xs); never smaller. */
  --text-xs:   12px;   /* mono labels, captions, code-line numbers */
  --text-sm:   13px;   /* secondary body, table cells */
  --text-base: 15px;   /* body */
  --text-md:   17px;   /* lead body */
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  84px;
  --text-6xl:  120px;  /* hero */

  /* Weight */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* Tracking — display gets tight, mono gets neutral, UI gets
     a slight loosening at small sizes for legibility */
  --tr-tight:    -0.03em;
  --tr-snug:     -0.015em;
  --tr-normal:   0;
  --tr-wide:     0.02em;
  --tr-mono:     0.01em;
  --tr-caps:     0.08em;     /* eyebrows / pill labels */

  /* Leading */
  --lh-tight:   1.0;
  --lh-snug:    1.12;
  --lh-display: 1.05;
  --lh-heading: 1.18;
  --lh-body:    1.55;
  --lh-prose:   1.65;

  /* ===========================================================
   * SHAPE & SPACING
   * =========================================================== */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* PAN's default radius is small. Sharp corners read as
     infrastructure / technical, not consumer-soft. */
  --radius-control: var(--radius-sm);
  --radius-card:    var(--radius-md);

  /* Spacing — 4px grid */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-14: 160px;

  /* Borders */
  --bw-hair:   0.5px;
  --bw-thin:   1px;
  --bw-thick:  2px;

  /* Shadows — used sparingly. Dark UI relies on borders &
     surface elevation, not blur. */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 0 0 1px var(--pan-ink-400) inset;
  --shadow-2: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--pan-ink-400) inset;
  --shadow-pop: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px var(--pan-ink-400) inset;
  --shadow-glow: 0 0 0 1px var(--pan-signal), 0 0 24px var(--pan-signal-soft);

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ===========================================================
 * LIGHT MODE — Marketing / docs surface
 * =========================================================== */
[data-pan-theme="light"] {
  --bg-canvas:      var(--pan-ink-1000);
  --bg-surface:     var(--pan-ink-1000);
  --bg-raised:      #F4F4F2;
  --bg-hover:       #ECECE9;
  --bg-pressed:     #E1E1DD;
  --bg-inverse:     var(--pan-ink-100);

  --fg-primary:     var(--pan-ink-50);
  --fg-secondary:   #1E2226;
  --fg-tertiary:    #4A5058;
  --fg-muted:       #6E747B;
  --fg-disabled:    #9CA1A6;
  --fg-inverse:     var(--pan-ink-950);

  --border-hairline: #E1E1DD;
  --border-default:  #D6D6D2;
  --border-strong:   #A8A8A0;

  --link:           var(--pan-ink-50);
  --link-hover:     var(--pan-ink-50);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--border-default) inset;
  --shadow-2: 0 12px 32px rgba(0,0,0,0.08), 0 0 0 1px var(--border-default) inset;
  --shadow-pop: 0 24px 64px rgba(0,0,0,0.12), 0 0 0 1px var(--border-default) inset;
}

/* ===========================================================
 * SEMANTIC TYPE — Element classes
 *
 * Use these classes directly OR mirror the rules in component
 * styles. Anchor everything to tokens, not hard values.
 * =========================================================== */

.pan-hero {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, var(--text-6xl));
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  color: var(--fg-primary);
}

.pan-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  color: var(--fg-primary);
}

.pan-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}

.pan-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}

.pan-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}

.pan-lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-normal);
  color: var(--fg-secondary);
}

.pan-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}

.pan-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--fg-tertiary);
}

/* Eyebrow / section label — small caps with tracking is core
   to the brand's voice: precise, technical, instrument-like. */
.pan-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  line-height: 1;
  color: var(--fg-tertiary);
}

/* Mono — addresses, tx hashes, amounts, API methods. */
.pan-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-mono);
  line-height: 1.4;
  color: var(--fg-secondary);
}

.pan-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  color: var(--fg-primary);
}

/* Numeric — for amounts. Tabular figures, slightly tighter. */
.pan-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-snug);
}