/* ============================================================
   tokens.css — DHP brand tokens applied to PinkalingOnline
   Self-hosted Futura family + locked color palette + utilities.
============================================================ */

/* ── FUTURA FONT FACE (self-hosted, copied from DHP) ──────── */
@font-face {
  font-family: 'Futura';
  src: url('/assets/fonts/Futura-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/assets/fonts/Futura-Book.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/assets/fonts/Futura-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/assets/fonts/Futura-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/assets/fonts/Futura-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/assets/fonts/Futura-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/assets/fonts/Futura-Heavy.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/assets/fonts/Futura-ExtraBlack.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* === Color (DHP brand, locked) === */
  --c-accent:       #1a7fd4;
  --c-accent-hi:    #4aa3f5;
  --c-accent-dim:   rgba(26, 127, 212, 0.15);
  --c-accent-glow:  rgba(26, 127, 212, 0.08);
  --c-black:        #000000;
  --c-void:         #050505;
  --c-dark:         #0d0d0d;
  --c-navy:         #101520;
  --c-white:        #ffffff;
  --c-text:         rgba(255, 255, 255, 0.90);
  --c-text-muted:   rgba(255, 255, 255, 0.52);
  --c-text-faint:   rgba(255, 255, 255, 0.34);
  --c-border:       rgba(255, 255, 255, 0.07);
  --c-border-hi:    rgba(255, 255, 255, 0.14);
  --c-surface:      rgba(255, 255, 255, 0.025);
  --c-surface-hi:   rgba(255, 255, 255, 0.05);

  /* === Trading semantic (universal up/down convention) === */
  --c-up:           #22c55e;
  --c-down:         #ef4444;
  --c-up-soft:      rgba(34, 197, 94, 0.12);
  --c-down-soft:    rgba(239, 68, 68, 0.12);

  /* === Typography (DHP Futura) === */
  --ff-display: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --ff-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* DHP weights */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* 4-size scale per DHP: Display / Heading / Body / Label */
  --t-display:  clamp(2.5rem, 7vw, 5.5rem);
  --t-heading:  clamp(2rem, 4vw, 3.5rem);
  --t-body:     1rem;
  --t-label:    0.875rem;
  --t-mono-sm:  0.8125rem;

  /* === Spacing (8px grid) === */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;

  /* === Radii (DHP uses 2px on buttons — squared aesthetic) === */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* === Layout === */
  --topbar-h: 56px;
  --sidebar-w: 280px;
  --trade-panel-h: 280px;

  /* === Motion === */
  --ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur:      0.28s;
}

/* ===== Base reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--c-black);
  color: var(--c-text);
  font-family: var(--ff-display);
  font-size: var(--t-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input  { font-family: inherit; color: inherit; background: none; border: 0; outline: 0; }
a      { color: inherit; text-decoration: none; }

/* ============================================================
   DHP UTILITIES — gradient rule line + accent highlight
   ============================================================ */

/* The DHP signature: 1.5px horizontal line that fades on both ends */
.rule-accent {
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--c-accent) 30%, var(--c-accent) 70%, transparent);
  opacity: 0.6;
  border: 0;
  margin: 0;
}

/* Power-word highlight inside any heading or body text */
.hi {
  color: var(--c-accent) !important;
  font-style: normal;
}

/* Eyebrow — small uppercase blue label that sits above headings */
.eyebrow {
  font-size: var(--t-label);
  font-weight: var(--fw-600);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
}