/* ─────────────────────────────────────────────────────────────
   Scoby Pay - Design Tokens
   Brand: living payment infrastructure
   Visual system: dark navy + living teal · connected-nodes mark
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand palette ───────────────────────────────────────── */

  --deep-core-navy: #081A22;   /* primary dark surface */
  --living-teal:    #17C4A3;   /* primary brand accent */
  --mint-layer:     #89F1D5;   /* growth highlight */
  --kombucha-amber: #DBA24C;   /* warning / kombucha accent */
  --slate-blue:     #2A4051;   /* secondary surface, info */
  --surface-mist:   #F5FAF8;   /* lightest surface */

  /* ── Neutrals ────────────────────────────────────────────── */

  --white:           #FFFFFF;
  --border:          #DCE7E3;
  --text-primary:    #0F1D24;
  --text-secondary:  #5D707A;
  --text-tertiary:   #8FA0A8;
  --text-muted:      #B8C4CA;

  /* Dark-mode tokens (the brand's default chrome) */
  --dark-1:   #050F14;   /* deepest - behind core */
  --dark-2:   #081A22;   /* deep core navy - primary dark bg */
  --dark-3:   #0F2630;   /* card on dark */
  --dark-4:   #1A3340;   /* divider/border on dark */
  --dark-5:   #2A4051;   /* slate blue - hover/border */

  --on-dark-1: #F5FAF8;  /* primary text on dark */
  --on-dark-2: #B8C4CA;  /* secondary text on dark */
  --on-dark-3: #6A7C84;  /* tertiary text on dark */

  /* ── Semantic ────────────────────────────────────────────── */

  --success:      #17C4A3;
  --success-soft: #D6F5EC;
  --success-dark: #0E8773;

  --processing:      #5D8AB8;
  --processing-soft: #DCE5F0;

  --warning:      #DBA24C;
  --warning-soft: #F7E6CC;

  --danger:       #E04D55;
  --danger-soft:  #F8D5D7;

  --info:         #2A4051;
  --info-soft:    #DCE7E3;

  /* ── Gradients ───────────────────────────────────────────── */

  --grad-primary: linear-gradient(135deg, #081A22 0%, #17C4A3 100%);
  --grad-growth:  linear-gradient(135deg, #17C4A3 0%, #89F1D5 100%);
  --grad-mesh:    radial-gradient(circle at 20% 30%, rgba(23, 196, 163, 0.18) 0%, transparent 50%),
                  radial-gradient(circle at 80% 70%, rgba(137, 241, 213, 0.10) 0%, transparent 55%),
                  radial-gradient(circle at 50% 100%, rgba(219, 162, 76, 0.08) 0%, transparent 60%);

  /* ── Typography ──────────────────────────────────────────── */

  --font-display: 'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale (semantic) */
  --t-h1: 48px;   --lh-h1: 52px;
  --t-h2: 32px;   --lh-h2: 40px;
  --t-h3: 24px;   --lh-h3: 32px;
  --t-h4: 20px;   --lh-h4: 28px;
  --t-body:    16px;   --lh-body:    24px;
  --t-body-sm: 14px;   --lh-body-sm: 20px;
  --t-caption: 12px;   --lh-caption: 16px;
  --t-mono:    14px;   --lh-mono:    20px;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.12em;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ── Spacing ─────────────────────────────────────────────── */

  --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:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ── Radii ───────────────────────────────────────────────── */

  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ── Shadows ─────────────────────────────────────────────── */

  /* Light theme */
  --shadow-1: 0 1px 2px 0 rgba(8, 26, 34, 0.04),
              0 1px 1px 0 rgba(8, 26, 34, 0.03);
  --shadow-2: 0 8px 24px -8px rgba(8, 26, 34, 0.10),
              0 2px 4px 0 rgba(8, 26, 34, 0.04);
  --shadow-pop: 0 24px 48px -16px rgba(8, 26, 34, 0.20),
                0 4px 8px 0 rgba(8, 26, 34, 0.06);

  /* Dark theme - teal-tinted glows over near-black */
  --shadow-dark-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --shadow-dark-2: 0 12px 32px -8px rgba(0, 0, 0, 0.50),
                   0 0 0 1px rgba(23, 196, 163, 0.04);
  --shadow-teal-glow: 0 0 24px -4px rgba(23, 196, 163, 0.35);

  /* ── Motion ──────────────────────────────────────────────── */

  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   400ms;
}

/* ─────────────────────────────────────────────────────────────
   Base & semantic element styles
   ───────────────────────────────────────────────────────────── */

html, body {
  background: var(--surface-mist);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .scoby-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0;
}

h2, .scoby-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

h3, .scoby-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h4, .scoby-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-h4);
  line-height: var(--lh-h4);
  margin: 0;
}

p, .scoby-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  text-wrap: pretty;
}

.scoby-body-sm {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}

.scoby-caption {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
}

.scoby-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

code, .scoby-mono, .scoby-tabular {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
  font-size: var(--t-mono);
  line-height: var(--lh-mono);
}

a {
  color: var(--living-teal);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--success-dark); }

::selection { background: var(--mint-layer); color: var(--text-primary); }

/* Gradient text helper */
.grad-text {
  background: var(--grad-growth);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   Signature pulse - used on "live" indicators only
   ───────────────────────────────────────────────────────────── */

@keyframes scoby-pulse {
  0%, 100% { opacity: 1.00; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.94); }
}
.scoby-pulse { animation: scoby-pulse 2s ease-in-out infinite; }