/* ============================================================
 * Alcedo Trading — token bundle
 * Verbatim copy of the design-system token files (colors, typography,
 * spacing, utilities) so that this webroot is self-contained.
 * Do not edit here — edit the design-system source and re-copy.
 * ============================================================ */
/* ============================================================
 * Alcedo — Color tokens
 * Deep, calm dark stage. Two functional accents from the kingfisher:
 * amber (the beak — action/focus/brand) and green (status — live/ok).
 * Text is warm cream, never pure white.
 * ============================================================ */
:root {
  /* --- Base palette --- */
  --bg-deep: #0B0D11;      /* primary stage */
  --bg-card: #0F1218;      /* surface / card */
  --bg-elev: #14181F;      /* elevated control / input chrome */
  --bg-sunk: #080A0F;      /* sunken code wells */

  --border: #1F232C;       /* default hairline */
  --border-soft: #181C23;  /* quieter hairline */

  --text: #F2EEE3;         /* cream — primary text */
  --text-dim: #8B8F99;     /* secondary text */
  --text-mute: #5A5E68;    /* labels, captions, idle */
  --text-faint: #3A3D44;   /* punctuation, disabled, dividers */

  /* Amber — brand / action / focus (the beak) */
  --amber: #D49858;
  --amber-soft: #E5B47A;
  --amber-deep: #A87238;
  /* Corner-bracket frame motif — intentionally softer than full amber so the
   * signature framing reads as a quiet accent, not a dominant outline. Single
   * global knob: dial the opacity up/down to taste. */
  --bracket: color-mix(in srgb, var(--amber) 55%, transparent);

  /* Signal green — live / ready / executed / profit */
  --green: #7CC97A;
  --green-dim: #4F8F50;

  /* Loss / danger — muted, brand-coherent red (never alarmist) */
  --red: #D45050;
  --red-soft: #E86E6E;
  --red-deep: #A83838;

  /* Grid lines (use over --bg-deep) */
  --grid: rgba(255, 255, 255, 0.022);
  --grid-strong: rgba(255, 255, 255, 0.05);

  /* Translucent accent washes (selected states, tints) */
  --amber-wash: rgba(212, 152, 88, 0.06);
  --amber-wash-strong: rgba(212, 152, 88, 0.12);
  --green-wash: rgba(124, 201, 122, 0.04);
  --red-wash: rgba(212, 80, 80, 0.04);

  /* ============================================================
   * Semantic aliases — prefer these in components
   * ============================================================ */
  --surface-page: var(--bg-deep);
  --surface-card: var(--bg-card);
  --surface-control: var(--bg-elev);
  --surface-well: var(--bg-sunk);

  --text-body: var(--text);
  --text-secondary: var(--text-dim);
  --text-label: var(--text-mute);
  --text-disabled: var(--text-faint);

  --accent: var(--amber);
  --accent-hover: var(--amber-soft);
  --accent-press: var(--amber-deep);
  --accent-on: #0B0D11;          /* text/icon color ON amber fills */

  --status-ok: var(--green);
  --status-watch: var(--amber);
  --status-loss: var(--red);

  --line: var(--border);
  --line-soft: var(--border-soft);
  --focus-ring: var(--amber);
}
/* ============================================================
 * Alcedo — Typography tokens
 * Mono-first. JetBrains Mono carries everything brand-facing:
 * wordmark, headlines, taglines, status chrome, UI labels, data.
 * Inter is a quiet supporting role for long-form body copy only.
 * ============================================================ */
:root {
  /* Families */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Brand-facing default is mono */
  --font-display: var(--font-mono);
  --font-body: var(--font-mono);
  --font-prose: var(--font-sans);   /* paragraphs over ~60 words */

  /* Weights */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Type scale (px) — terminal-document rhythm */
  --fs-wordmark: 56px;
  --fs-display: 32px;   /* big headlines / taglines */
  --fs-title: 22px;     /* modal + section titles */
  --fs-subtitle: 18px;
  --fs-body: 14px;      /* default UI / mono body */
  --fs-body-lg: 16px;
  --fs-data: 14px;      /* numeric values in fields */
  --fs-caption: 12px;   /* notes, secondary labels */
  --fs-label: 11px;     /* uppercase status labels */
  --fs-micro: 10px;     /* smallest uppercase chrome */

  /* Line heights */
  --lh-tight: 1.1; /* @kind font */
  --lh-snug: 1.35; /* @kind font */
  --lh-body: 1.65; /* @kind font */
  --lh-prose: 1.7; /* @kind font */

  /* Letter spacing — tight display, wide uppercase chrome */
  --ls-display: -0.02em;
  --ls-wordmark: -0.01em;
  --ls-body: -0.005em;
  --ls-label: 0.18em;     /* uppercase status labels */
  --ls-label-wide: 0.22em;
}
/* ============================================================
 * Alcedo — Spacing, radius, borders, shadows, motion
 * The system is square and precise. Corners are barely rounded
 * (2–4px) or sharp; the grid is 32px; brackets and dashed rules
 * frame surfaces instead of heavy chrome.
 * ============================================================ */
:root {
  /* Spacing scale (4px 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-14: 56px;
  --space-16: 64px;

  /* Layout */
  --grid-size: 32px;          /* signature grid-background pitch */
  --grid-size-fine: 24px;
  --modal-pad: 36px;          /* modal body horizontal padding */

  /* Radii — minimal. The brand is square. */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius: 3px;              /* default — inline code, chips */
  --radius-md: 4px;
  --radius-pill: 999px;       /* toggle knobs / status dots only */

  /* Border widths */
  --bw-hair: 1px;             /* default hairline */
  --bw-accent: 1.5px;         /* selected / brand-framed surfaces */
  --bracket-w: 1.5px;         /* corner-bracket stroke */
  --bracket-size: 16px;       /* corner-bracket arm length */

  /* Shadows — used sparingly; only floating surfaces (modals) cast them */
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.5);
  --glow-green: 0 0 8px rgba(124, 201, 122, 0.6);
  --glow-amber: 0 0 8px rgba(212, 152, 88, 0.6);

  /* Motion — quick, calm, no bounce. The bird is still until it strikes. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
}
/* ============================================================
 * Alcedo — Reusable brand utility classes & primitives
 * Layered on top of the tokens. These encode the signature
 * motifs: the grid background, corner brackets, status dots.
 * ============================================================ */

/* --- Font helpers --- */
.alc-mono { font-family: var(--font-mono); }
.alc-sans { font-family: var(--font-sans); }

/* --- Grid backgrounds (the signature dark stage) --- */
.alc-grid {
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.alc-grid-fine {
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size-fine) var(--grid-size-fine);
}
.alc-grid-card {
  background-color: var(--bg-card);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* --- Corner brackets — frame brand surfaces. Always amber, 1.5px. --- */
.alc-brackets { position: relative; }
.alc-brackets::before,
.alc-brackets::after,
.alc-brackets > .alc-br-bl,
.alc-brackets > .alc-br-br {
  content: "";
  position: absolute;
  width: var(--bracket-size);
  height: var(--bracket-size);
  border-color: var(--amber);
  border-style: solid;
  pointer-events: none;
}
.alc-brackets::before { top: 10px; left: 10px; border-width: var(--bracket-w) 0 0 var(--bracket-w); }
.alc-brackets::after { top: 10px; right: 10px; border-width: var(--bracket-w) var(--bracket-w) 0 0; }
.alc-brackets > .alc-br-bl { bottom: 10px; left: 10px; border-width: 0 0 var(--bracket-w) var(--bracket-w); }
.alc-brackets > .alc-br-br { bottom: 10px; right: 10px; border-width: 0 var(--bracket-w) var(--bracket-w) 0; }

/* --- Status dots — green = ok, amber = waiting, hollow = idle --- */
.alc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--green);
  box-shadow: var(--glow-green);
  vertical-align: middle;
}
.alc-dot.amber { background: var(--amber); box-shadow: var(--glow-amber); }

/* --- Dashed divider (modal headers/footers use these) --- */
.alc-rule-dashed { border: 0; border-top: 1px dashed var(--border); }
.alc-rule { border: 0; border-top: 1px solid var(--border); }