/* ============================================================
   TradersProxy — design tokens
   Single source of truth for colour, type, radius, spacing.
   Mirrors portal/frontend/src/tokens/tokens.css so the marketing
   site and the logged-in portal share the same visual vocabulary.
   ============================================================ */

:root {
  /* Surfaces */
  --tp-bg:            #0B0F19;   /* page base */
  --tp-bg-deep:       #090D16;   /* header / sticky regions */
  --tp-bg-panel:      #0F1420;   /* section dividers */
  --tp-card:          #131825;   /* flat cards */
  --tp-card-alt:      #171D2C;   /* nested cards */

  /* Borders */
  --tp-border:        rgba(255, 255, 255, 0.06);
  --tp-border-strong: rgba(255, 255, 255, 0.12);
  --tp-border-accent: rgba(16, 185, 129, 0.25);

  /* Text */
  --tp-text:          #e2e8f0;
  --tp-text-dim:      #94a3b8;
  --tp-muted:         #64748b;
  --tp-faint:         #475569;

  /* Accent */
  --tp-accent:        #10b981;
  --tp-accent-hi:     #34d399;
  --tp-accent-dim:    rgba(16, 185, 129, 0.14);
  --tp-accent-glow:   rgba(16, 185, 129, 0.20);

  /* Semantic */
  --tp-danger:        #ef4444;
  --tp-warn:          #f59e0b;
  --tp-blue:          #3b82f6;

  /* Type */
  --tp-font-sans:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tp-font-mono:     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale (fluid) */
  --tp-text-xs:       clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);   /* 11–12px — eyebrow */
  --tp-text-sm:       clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* 13–14px — meta */
  --tp-text-base:     clamp(1rem, 0.95rem + 0.2vw, 1.125rem);       /* 16–18px — body */
  --tp-text-lg:       clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);    /* 18–20px — lede */
  --tp-text-xl:       clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);      /* 20–24px — h3 */
  --tp-text-2xl:      clamp(1.5rem, 1.35rem + 0.7vw, 2rem);         /* 24–32px — h2 */
  --tp-text-3xl:      clamp(1.875rem, 1.6rem + 1.3vw, 2.75rem);     /* 30–44px — chapter */
  --tp-text-4xl:      clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem);      /* 36–56px — hero */

  /* Line heights */
  --tp-lh-tight:      1.1;
  --tp-lh-snug:       1.3;
  --tp-lh-base:       1.65;   /* long-form body */
  --tp-lh-loose:      1.8;

  /* Radius */
  --tp-radius-sm:     2px;    /* buttons, pills */
  --tp-radius-md:     6px;    /* cards, modals */
  --tp-radius-lg:     10px;   /* hero panels */

  /* Spacing */
  --tp-space-1:       0.25rem;
  --tp-space-2:       0.5rem;
  --tp-space-3:       0.75rem;
  --tp-space-4:       1rem;
  --tp-space-5:       1.5rem;
  --tp-space-6:       2rem;
  --tp-space-7:       3rem;
  --tp-space-8:       4rem;
  --tp-space-9:       6rem;
  --tp-space-10:      8rem;

  /* Layout */
  --tp-measure:       68ch;   /* long-form body column */
  --tp-measure-wide:  84ch;   /* section subheads */
  --tp-container:     72rem;  /* outer content cap */
  --tp-container-wide: 80rem; /* pricing / dense grids */
  --tp-header-h:      56px;

  /* Motion */
  --tp-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --tp-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --tp-dur-fast:      150ms;
  --tp-dur-base:      250ms;
  --tp-dur-slow:      450ms;

  /* Shadow (minimal — editorial aesthetic prefers borders over shadows) */
  --tp-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4);
  --tp-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.35);
  --tp-shadow-glow:   0 0 24px rgba(16, 185, 129, 0.12);
}