/* TradeNeon portal design tokens — canonical, dark-mode only.
 *
 * Phase 12 (2026-07-03). The single source of truth for portal design
 * tokens. The legacy light-mode variables.css it superseded was DELETED in
 * Phase 20 (along with the whole override layer); --sidebar-width (220px)
 * was carried over here so portal.css owns the sidebar with no legacy dep.
 *
 * The :root block below is pasted VERBATIM from Marnie's design-system.md
 * §2 (itself an export of the production dark theme the pre-Phase-20 sheets
 * rendered). Because it codifies what dark pages already render, components
 * built against these tokens come out near-pixel-identical to today.
 *
 * No new code may reference the legacy variables.css tokens
 * (--primary-color, --bg-color, --text-color, --highlight-color*,
 * --default-*). Add a token here instead of a literal.
 */

:root {
  /* --- Base surface --- */
  --bg:                 rgb(9, 13, 86);                /* page background (deep navy) */
  --surface-dropdown:   #0e1268;                       /* popovers, calendars, menus */

  /* --- Text (white at decreasing opacity) --- */
  --text:               #fff;                          /* primary */
  --text-on-card:       rgba(255, 255, 255, 0.85);     /* body copy inside cards */
  --text-muted:         rgba(255, 255, 255, 0.70);     /* secondary / subheads */
  --text-tertiary:      rgba(255, 255, 255, 0.55);     /* help text, captions */
  --text-faint:         rgba(255, 255, 255, 0.42);     /* placeholders, disabled labels */
  --text-paper:         #F3F6FF;                        /* near-white for pricing/checkout */

  /* --- Accent --- */
  --accent:             #FF3C8D;                        /* brand neon pink */
  --accent-2:           #FF846A;                        /* gradient partner (orange) */
  --accent-cta-text:    #080B14;                        /* dark text on the pink gradient */
  --accent-deep:        #4a0080;                        /* purple, text on white pills */

  /* --- Surfaces & borders (white-alpha glass) --- */
  --card-surface:       linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
  --card-surface-bright:linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  --card-border:        rgba(255, 255, 255, 0.20);
  --card-border-hover:  rgba(255, 255, 255, 0.40);
  --hairline:           rgba(255, 255, 255, 0.15);      /* dividers, panel headers */

  /* --- Inputs --- */
  --input-bg:           rgba(255, 255, 255, 0.06);
  --input-bg-focus:     rgba(255, 255, 255, 0.10);
  --input-border:       rgba(255, 255, 255, 0.20);
  --input-border-focus: rgba(255, 255, 255, 0.50);
  --input-placeholder:  rgba(255, 255, 255, 0.40);

  /* --- Buttons (secondary / outline) --- */
  --btn-bg:             rgba(255, 255, 255, 0.15);
  --btn-bg-hover:       rgba(255, 255, 255, 0.25);
  --btn-border:         rgba(255, 255, 255, 0.30);

  /* --- Semantic --- */
  --success-bg:         rgba(46, 204, 113, 0.18);
  --success-text:       #b8f5cf;
  --green:              #19E08C;   /* bull/success accent (Phase 15 shop "✓ im Paket"); fixes the mockup's undefined var(--green) */
  --danger-bg:          rgba(255, 60, 141, 0.15);
  --danger-border:      rgba(255, 60, 141, 0.40);
  --danger-text:        #ffd6e6;
  --info-bg:            rgba(102, 102, 255, 0.15);
  --info-border:        rgba(102, 102, 255, 0.40);
  --info-text:          #c5c5ff;

  /* --- Type --- */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Radius --- */
  --radius-sm:  6px;     /* inputs, small chips */
  --radius-md:  12px;    /* cards, panels */
  --radius-lg:  16px;    /* pricing cards */
  --radius-pill: 999px;  /* pill buttons */

  /* --- Elevation --- */
  --shadow-card:  0 10px 40px rgba(0, 0, 0, 0.30);
  --shadow-glow:  0 10px 40px rgba(255, 60, 141, 0.20);   /* accent glow on hover */
  --shadow-soft:  0 5px 15px rgba(0, 0, 0, 0.15);
  --shadow-pop:   0 12px 32px rgba(0, 0, 0, 0.40);        /* popovers/calendars */

  /* --- Motion --- */
  --transition: 0.2s ease;

  /* ---------------------------------------------------------------------
   * Portal additions (phase 12) — not part of the design-system §2 export.
   * ------------------------------------------------------------------- */

  /* Product palette (used to theme per-context buttons/accents). */
  --loi-pink: #FF3C8D;   /* Level of Interest */
  --fi-blue:  #6666FF;   /* Futures Insights (gradient partner) */
  --fi-turq:  #17F8E0;   /* Futures Insights (gradient start) */

  /* Button context tokens. Defaults = FI turquoise -> blue gradient
   * (button-regeln.md). Set these per context to re-theme .tn-btn without
   * touching its structure: FI keeps the defaults; LOI/pink sets
   *   --btn-from: var(--accent); --btn-to: var(--accent-2);
   *   --btn-glow: var(--shadow-glow); --btn-text: var(--accent-cta-text);
   * The turquoise gradient needs near-black text; the pink gradient uses
   * --accent-cta-text (#080B14). */
  --btn-from: var(--fi-turq);
  --btn-to:   var(--fi-blue);
  --btn-glow: rgba(23, 248, 224, 0.30);
  --btn-text: #04141a;

  /* Layout (carried over from variables.css so portal.css owns the sidebar
   * without depending on the legacy token file). */
  --sidebar-width: 220px;
  --sidebar-width-slim: 68px;   /* collapsed icon-only rail (desktop) */

  /* Nav collapse/drawer motion. Decelerating ease (fast start, slow settle)
   * per the sidebar spec; 400ms is snappy but readable. */
  --nav-duration: 400ms;
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Breakpoints — documented here for reference. CSS custom properties
   * CANNOT be used inside @media queries, so these values are hardcoded in
   * portal.css / page CSS rules. Keep them in sync with this table:
   *   1024px  4-col -> 2-col grids
   *    768px  dense -> single column
   *    600px  full single column (centered, cap ~320px) */
}