/* =============================================================================
   Ravebotics — ALT THEME: "Blueprint × Rave"
   alt_blueprint.css

   A darker, more technical companion to the core brand. Born in the Bead Studio
   Kiosk: a drafting-table world of blueprint navy + a cyan engineering grid (the
   "cutting mat"), with the electric pink/lime rave accents kept intact on top.

   Use this when a surface should feel like a *machine workspace* — kiosks,
   configurators, dashboards, "behind the robot" / process storytelling — rather
   than the bright white retail brand. Pair with colors_and_type.css (this file
   only ADDS blueprint tokens; pink/lime/ink/Comfortaa are unchanged).
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&display=swap');

:root {
  /* ── Core brand tokens (mirrored here so alt cards are self-contained) ── */
  --rb-pink: #FB02AB;
  --rb-lime: #CFFA2E;
  --rb-ink:  #000000;
  --rb-bg:   #FFFFFF;
  --rb-font: 'Comfortaa', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── Blueprint field (the navy "cutting mat") ─────────────────────────── */
  --bp-navy:       #0B2C66;   /* base field */
  --bp-navy-deep:  #07204D;   /* page background, deepest */
  --bp-navy-2:     #0E3576;   /* top-of-field highlight for the vignette */
  --bp-panel:      #2A3550;   /* muted panel / disabled foot */

  /* ── Engineering grid + draughting ink ────────────────────────────────── */
  --bp-cyan:       #6FB4FF;   /* primary cyan — eyebrows, labels, dimension ink */
  --bp-cyan-soft:  #A9D2FF;   /* secondary cyan — annotations, captions */
  --bp-paper:      #F4F8FF;   /* near-white "drafting paper" */
  --bp-grid:        rgba(125,185,255,0.16);  /* fine 28px grid lines */
  --bp-grid-strong: rgba(125,185,255,0.30);  /* major 140px grid lines */
  --bp-line:        rgba(170,210,255,0.55);  /* dimension lines, hairline borders */

  /* ── Foreground on the navy field ─────────────────────────────────────── */
  --bp-fg-1: #FFFFFF;                  /* primary text on navy */
  --bp-fg-2: var(--bp-cyan-soft);      /* secondary text on navy */
  --bp-fg-3: rgba(255,255,255,0.55);   /* tertiary */

  /* ── Candy bead palette (the physical bead colors the robot stocks) ───── */
  /* These are PRODUCT colors — the plastic beads. Distinct from brand pink/lime.
     Use for color pickers, confetti, data viz, playful accents on the field. */
  --bead-lightblue: #5BB8FF;
  --bead-darkblue:  #1E3FA8;
  --bead-darkgreen: #1C7C3C;
  --bead-purple:    #7B2FD0;
  --bead-pink:      #FF5DAE;
  --bead-red:       #E22330;
  --bead-orange:    #FF861A;
  --bead-yellow:    #FFD92E;
  --bead-black:     #141414;
  --bead-white:     #FFFFFF;

  /* ── Motion (kiosk adds a "back"/overshoot ease for tactile pops) ─────── */
  --bp-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --bp-ease-emph: cubic-bezier(0.2, 0, 0, 1);
  --bp-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot — bead snap */
}

/* =============================================================================
   .bp-field — the cutting-mat background
   Apply to any full-bleed surface. Two layered grids (fine + major) over a
   radial navy vignette that's brightest at the top, like an overhead lamp.
   ============================================================================= */
.bp-field {
  background-color: var(--bp-navy);
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
    linear-gradient(var(--bp-grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-strong) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 0%, var(--bp-navy-2) 0%, var(--bp-navy) 45%, var(--bp-navy-deep) 100%);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px, 100% 100%;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0;
  color: var(--bp-fg-1);
}

/* =============================================================================
   Blueprint draughting marks
   ============================================================================= */

/* Corner registration tick — drop in the corners of a framed region */
.bp-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--bp-line);
  opacity: 0.5;
  pointer-events: none;
}
.bp-corner.tl { top: 14px;  left: 14px;  border-right: none; border-bottom: none; }
.bp-corner.tr { top: 14px;  right: 14px; border-left:  none; border-bottom: none; }
.bp-corner.bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.bp-corner.br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* Eyebrow — wide-tracked cyan caps, the kiosk's section label */
.bp-eyebrow {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bp-cyan);
}

/* Annotation / spec readout — tabular cyan-soft caps */
.bp-annot {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bp-cyan-soft);
  font-variant-numeric: tabular-nums;
}

/* Dimension line — for SVG measurement guides */
.bp-dim-line { stroke: var(--bp-line); stroke-width: 1.5; }

/* =============================================================================
   Panels & tiles on the field
   ============================================================================= */

/* Translucent glass panel that sits over the grid */
.bp-panel-glass {
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--bp-line);
}

/* "Blueprint blank" hatch — a not-yet-filled slot */
.bp-hatch {
  background: repeating-linear-gradient(135deg,
    rgba(125,185,255,0.05) 0 12px, transparent 12px 24px);
  box-shadow: inset 0 0 0 1.5px rgba(125,185,255,0.18);
}

/* White product tile (a finished design sitting on the mat) */
.bp-tile {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.30);
  transition: transform 160ms var(--bp-ease), box-shadow 160ms var(--bp-ease);
}
.bp-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35), inset 0 0 0 2px var(--rb-lime);
}

/* =============================================================================
   Buttons on the field (override the white-brand button surfaces)
   pink / lime stay the same; ghost becomes a cyan-hairline outline.
   ============================================================================= */
.bp-btn-ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 2px var(--bp-line);
  border: none; border-radius: 9999px; cursor: pointer;
  font-family: var(--rb-font); font-weight: 700;
  transition: box-shadow 160ms var(--bp-ease), background 160ms var(--bp-ease);
}
.bp-btn-ghost:hover {
  box-shadow: inset 0 0 0 2px #fff;
  background: rgba(255,255,255,0.06);
}

/* Mini bead chip — the kiosk's wordmark companion glyph */
.bp-mini-bead {
  width: 26px; height: 26px; border-radius: 5px;
  background: #fff; color: var(--bp-navy);
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px; font-family: var(--rb-font);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}