/*
 * FlipDeck Cards — the ONE site-wide theme. Every page links this file; colours are defined here and nowhere else.
 *
 * The rules of the palette
 *   1. Neutral dark base: charcoal backgrounds, white primary text, grey secondary text.
 *   2. ONE brand colour (blue) for buttons, links, focus rings and active states.
 *   3. Green and red mean MONEY only: profit / loss, price up / down, ROI. (Red is also used for errors and
 *      destructive buttons, through --danger.)
 *   4. No purple. The only extra accent is the small VIP badge colour (--vip).
 *   5. The logo keeps its own two colours (--logo-green, --logo-blue) — do not use them for anything else.
 *
 * To change the look of the whole site, change the values below.
 */

:root {
  /* ── Neutral base ── */
  --bg-deep:      #14161a;   /* page background */
  --bg-card:      #1b1e24;   /* cards, panels, the top menu */
  --bg-surface:   #22262d;   /* inputs, table headers, raised boxes */
  --bg-input:     #22262d;
  --bg-elevated:  #272c34;
  --bg-hover:     #2c313a;
  --text-primary:   #ffffff;
  --text-secondary: #a1a8b3;
  --text-muted:     #737b88;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-hover:  rgba(255, 255, 255, 0.16);

  /* ── Brand (blue): buttons, links, focus, active states ── */
  --brand:        #3b82f6;
  --brand-hover:  #2563eb;
  --brand-rgb:    59, 130, 246;
  --brand-dim:    rgba(var(--brand-rgb), 0.12);
  --brand-glow:   rgba(var(--brand-rgb), 0.15);
  --border-focus: rgba(var(--brand-rgb), 0.5);
  --on-brand:     #ffffff;   /* text on a brand-coloured button */

  /* ── Money: green = profit / up, red = loss / down ── */
  --profit:        #22c55e;
  --profit-strong: #16a34a;
  --profit-rgb:    34, 197, 94;
  --profit-dim:    rgba(var(--profit-rgb), 0.12);
  --loss:          #ef4444;
  --loss-rgb:      239, 68, 68;
  --loss-dim:      rgba(var(--loss-rgb), 0.12);
  --danger:        var(--loss);          /* errors and destructive buttons */
  --danger-dim:    var(--loss-dim);

  /* ── Small extras ── */
  --vip:     #a78bfa;                    /* VIP / promo badge only */
  --vip-dim: rgba(167, 139, 250, 0.14);
  --warning: #facc15;                    /* warnings only */
  --warning-rgb: 250, 204, 21;
  --warning-dim: rgba(var(--warning-rgb), 0.12);

  /* ── Logo (fixed) ── */
  --logo-green: #22c55e;
  --logo-blue:  #3b82f6;

  /* ── Shape and depth ── */
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 4px 24px rgba(0, 0, 0, 0.4);

  /* ── Older variable names still found in page code. They all point at the tokens above, so anything
        not yet renamed follows the theme too (the old green / purple / blue names now mean "brand"). ── */
  --green-bright: var(--brand);
  --green:        var(--brand);
  --green-dim:    var(--brand-hover);
  --green-glow:   var(--brand-glow);
  --blue:         var(--brand);
  --blue-bright:  var(--brand);
  --blue-dim:     var(--brand-dim);
  --blue-glow:    var(--brand-glow);
  --accent:       var(--brand);
  --accent-hex:   var(--brand);
  --accent-dim:   var(--brand-hover);
  --accent-glow:  var(--brand-glow);
  --gem:          var(--brand);
  --gem-dim:      var(--brand-dim);
  --gem-glow:     var(--brand-glow);
  --purple:       var(--brand);
  --purple-dim:   var(--brand-dim);
  --cardsight:    var(--brand);
  --cardsight-dim: var(--brand-dim);
  --red:          var(--loss);
  --red-dim:      var(--loss-dim);
  --gold:         var(--warning);
  --gold-dim:     var(--warning-dim);
  --bg:           var(--bg-deep);
  --surface:      var(--bg-card);
  --surface2:     var(--bg-surface);
  --text:         var(--text-primary);
  --btn-text:     var(--on-brand);
}

html { color-scheme: dark; }
::selection { background: var(--brand-glow); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Shared components (use these for anything new; existing pages already take their colours from the tokens) ── */

.fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: inherit; font-weight: 600; font-size: 0.92rem; line-height: 1.2;
  padding: 0.65rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.fd-btn--primary { background: var(--brand); color: var(--on-brand); }
.fd-btn--primary:hover { background: var(--brand-hover); }
.fd-btn--secondary { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
.fd-btn--secondary:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.fd-btn--danger { background: transparent; color: var(--danger); border-color: rgba(var(--loss-rgb), 0.45); }
.fd-btn--danger:hover { background: var(--danger-dim); }
.fd-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.fd-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }

.fd-input {
  width: 100%; padding: 0.65rem 0.85rem; font-family: inherit; font-size: 0.92rem;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none;
}
.fd-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--brand-glow); }
.fd-input::placeholder { color: var(--text-muted); }

.fd-table { width: 100%; border-collapse: collapse; }
.fd-table th { text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--bg-surface); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.fd-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--text-primary); font-size: 0.9rem; }
.fd-table tbody tr:hover { background: var(--bg-hover); }

.fd-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--brand-dim); color: var(--brand);
}
.fd-badge--vip { background: var(--vip-dim); color: var(--vip); }

/* Money colours: use ONLY for profit / loss / price change / ROI */
.fd-profit, .fd-up   { color: var(--profit); }
.fd-loss,   .fd-down { color: var(--loss); }

/* ── The brand name. ONE style, used everywhere "FlipDeck Cards" appears as a logo/brand:
      <span class="fd-brand"><span class="fd-brand-flip">FlipDeck</span> <span class="fd-brand-cards">Cards</span></span>
      "FlipDeck" is the logo green and "Cards" the brand blue (the login card). This is the only green allowed outside money values. ── */
.fd-brand { font-family: "Space Grotesk", sans-serif; font-weight: 700; white-space: nowrap; }
.fd-brand .fd-brand-flip { color: var(--logo-green); }
.fd-brand .fd-brand-cards { color: var(--logo-blue); }

/* ── The page header used on every page except Home: white title, one muted subtitle, optional small note. ── */
header.fd-page-header { box-sizing: border-box; width: 100%; max-width: 900px; margin: 0 auto; padding: 2.25rem 1.5rem 1.5rem; text-align: center; }
header.fd-page-header h1.fd-page-title { margin: 0 0 0.5rem; padding: 0; font-family: "Space Grotesk", sans-serif; font-size: 2.25rem; font-weight: 700;
  line-height: 1.15; letter-spacing: normal; color: var(--text-primary); background: none; -webkit-text-fill-color: currentColor; text-align: center; }
header.fd-page-header p.fd-page-sub { margin: 0 auto; max-width: 720px; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--text-secondary); }
header.fd-page-header p.fd-page-note { margin: 0.6rem auto 0; max-width: 720px; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 600px) {
  header.fd-page-header { padding: 1.5rem 1rem 1rem; }
  header.fd-page-header h1.fd-page-title { font-size: 1.75rem; }
}