/* Coinz prototypes, shared theme
   Ratified design-system tokens (docs/design-system/PROPOSAL.md, v1 2026-07-08).
   Color, font, and v2-form values are the production CSS custom properties
   extracted from Coinz staging and reconciled with the AA_Coinz.Base Figma
   file; their names match production. Spacing, radius, and type tokens are
   PoC-local names carrying ratified values (production defines no custom
   properties for those).
   Primary CTA is the ratified cyan gradient (#00FCFD to #0078E5, OQ-2),
   the blue-family successor to the earlier flat 1e88ff purchase blue. */

:root {
  /* Surfaces */
  --surface-darkest: #000724;
  --surface-dark: #001f58;            /* page shell */
  --surface-lighter: #0f2a5c;
  --surface-lightest: #123a85;
  --surface-lightest-x2: #1a4384;     /* cards / containers */
  --surface-lightest-x3: #245db8;     /* raised elements / hover wash */
  --surface-dark-500: rgba(0, 7, 36, 0.5);
  --surface-plain: #fff;
  --navbar-background: #123a85;

  /* Text */
  --text-primary: #fff;
  --text-secondary: #8297bd;
  --text-tertiary: #4f6080;
  --text-inverted-primary: #000724;
  --text-on-cyan: #041b4c;

  /* Borders */
  --border-primary: #fff;
  --border-primary-hover: #c3c3c3;
  --border-secondary: #586680;
  --border-light: #4c7ac3;
  --border-dark: #1a4384;

  /* CTA / accents */
  --accent-cyan-gradient: linear-gradient(180deg, #00fcfd 0%, #0078e5 100%); /* target primary CTA */
  --accent-blue: #2a6ad1;
  --accent-green: #26ff22;
  --link-color: var(--accent-green);
  --gold-gradient: linear-gradient(76deg, #ffe849 0%, #ffbe08 100%); /* pack/price CTAs only */
  --accent-hot: #ff13af; /* active category pill on deep pages ONLY (OQ-8); lobby active pill is white */
  --button-primary-gradient: linear-gradient(180deg, #ff0067 0%, #ff0000 100%);
    /* legacy pink, migration backlog on production; defined for reference, zero consumers here */

  /* Coins */
  --sc-coin-color: #26ff22;
  --gc-coin-color: #fee039;

  /* Alerts (OQ-7). Dark values: use as chip/fill backgrounds with white text,
     never as bare text color on navy */
  --alert-error: #c91f3e;
  --alert-success: #057d1f;
  --alert-warning: #9e8504;

  /* v2 form dialect (OQ-9), the target input language */
  --v2-input-form: rgba(247, 245, 238, 0.8);
  --v2-input-color: #051948;
  --v2-input-background-focus: rgba(247, 245, 238, 0.95);
  --v2-input-border-focus: none;
  --v2-input-placeholder-color: rgba(5, 25, 72, 0.45);
  --v2-input-placeholder-weight: 700;

  /* Typography: Open Sans UI/body, Poppins display/numerals/prices */
  --font-family: 'Open Sans', system-ui, sans-serif;
  --third-family: 'Poppins', var(--font-family);
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-24: 24px;
  --text-30: 30px;
  --text-36: 36px;
  --text-40: 40px;

  /* Spacing: ratified 2px-step small scale + section scale (OQ-4) */
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-40: 40px;
  --sp-48: 48px;

  /* Radius (OQ-3). Pill note: the ratified per-height ladder (32/44/50/56)
     renders identically to 100px on anything shorter than 200px, so one
     token carries it in the PoCs */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 100px;
  --radius-circle: 50%;
  --radius-input-v2: 14px;

  /* Elevation: the only two shadows in the ratified system */
  --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);

  /* PoC semantic market signals; every value derives from a ratified token */
  --market-up: var(--accent-green);
  --market-up-bg: rgba(38, 255, 34, 0.12);
  --market-down: var(--alert-error);
  --market-down-bg: rgba(201, 31, 62, 0.18);
  --market-flat: var(--text-secondary);

}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--surface-dark);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--text-16);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* When the prototype-tools toolbar is on the page, give it its own
   column on the right so it never overlaps page content. */
body:has(#prototype-tools) { padding-right: 140px; }
@media (max-width: 900px) {
  body:has(#prototype-tools) { padding-right: 0; }
}

button { font-family: inherit; cursor: pointer; }

/* ───────────────────────────────────────────────────────────────────────
   PROTOTYPE TOOLS — dev/review chrome (Viewport switcher, Overview tab)
   Vertical strip anchored to the right edge, centered. Always visible
   so reviewers don't miss it. Drop this markup into any prototype:
     <div id="prototype-tools" data-controller="viewport">
       <span class="label">Viewport</span>
       <button data-action="click->viewport#set" data-viewport-width-param="full" class="active">Desktop</button>
       …
       <span class="divider"></span>
       <button data-action="click->docs#show">Overview</button>
     </div>
   ─────────────────────────────────────────────────────────────────────── */
#prototype-tools {
  position: fixed; top: 50%; right: 14px; z-index: 9999;
  transform: translateY(-50%);
  font-family: system-ui; font-size: 13px;
  background: rgba(0, 0, 0, 0.82); color: white;
  padding: 14px 12px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#prototype-tools .label {
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase; letter-spacing: 0.10em;
  font-size: 10px; text-align: center;
  margin-bottom: 2px;
}
#prototype-tools button {
  background: rgba(255, 255, 255, 0.08); color: white;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 9px 16px; border-radius: 8px; font-size: 13px;
  font-family: inherit;
  min-width: 96px; text-align: center;
  transition: all 0.15s ease;
}
#prototype-tools button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}
#prototype-tools button.active {
  background: rgba(38, 255, 34, 0.20);
  border-color: rgba(38, 255, 34, 0.60);
  color: var(--accent-green);
}
#prototype-tools .divider {
  height: 1px; width: 100%;
  background: rgba(255, 255, 255, 0.15);
  margin: 4px 0;
}