/* ============================================================================
   WeedUs Case Card Studio - design tokens (APP CHROME ONLY)
   Locked brand tokens + glass primitives. The dark premium glass chrome is
   the wow factor. These tokens NEVER touch the printed card; the card is
   themed only by CC.cardEngine.palettes (see app.css card section + engine).

   Vanilla CSS. No external font or asset fetch. CSP safe.
   No em or en dashes anywhere (owner rule). ASCII hyphen only.
   ============================================================================ */

:root {
  /* ----- Brand core (locked names) ----- */
  --bg:            #0a0f0d;   /* app background */
  --bg-2:          #0c1512;   /* deeper background stop for gradients + surfaces */
  --green-1:       #22c55e;   /* primary green */
  --green-2:       #16a34a;   /* deeper green (gradient end) */
  --accent:        #4ade80;   /* single bright accent */
  --mint:          #86efac;   /* light green ink */
  --ink-on-green:  #06130b;   /* text sitting on green fills */

  /* ----- Text ink tiers (locked names, white opacity) ----- */
  --t-head:        rgba(255, 255, 255, 0.90);
  --t-body:        rgba(255, 255, 255, 0.80);
  --t-sec:         rgba(255, 255, 255, 0.70);
  --t-meta:        rgba(255, 255, 255, 0.60);
  --t-faint:       rgba(255, 255, 255, 0.40);

  /* ----- Functional (locked names) ----- */
  --error:         #ef4444;
  --error-bg:      rgba(239, 68, 68, 0.12);
  --warn:          #f59e0b;
  --warn-bg:       rgba(245, 158, 11, 0.12);

  /* ----- Glass primitives (chrome surfaces) ----- */
  --glass:         rgba(255, 255, 255, 0.045);
  --glass-2:       rgba(255, 255, 255, 0.065);
  --glass-3:       rgba(255, 255, 255, 0.09);
  --border:        rgba(255, 255, 255, 0.08);   /* locked glass panel border */
  --border-2:      rgba(255, 255, 255, 0.16);   /* stronger tier */
  --border-green:  rgba(74, 222, 128, 0.35);

  /* ----- Geometry ----- */
  --r-sm:          8px;
  --r-md:          12px;
  --r-lg:          16px;    /* 1rem, the rounded glass-panel radius */
  --r-xl:          22px;
  --r-pill:        999px;

  /* ----- Elevation + blur ----- */
  --blur:          18px;
  --shadow:        0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft:   0 4px 18px rgba(0, 0, 0, 0.30);
  --glow:          0 0 0 1px var(--border-green), 0 8px 30px rgba(34, 197, 94, 0.20);

  /* ----- Motion ----- */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --fast:          140ms var(--ease);
  --med:           240ms var(--ease);

  /* ----- Layout metrics ----- */
  --rail-w:        340px;
  --topbar-h:      60px;

  /* ----- Chrome font (referenced by name only, no fetch, system fallbacks) ----- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   Glass primitive utility. Any chrome surface can opt into the translucent
   blurred glass look with a single class.
   ---------------------------------------------------------------------------- */
.cc-glass {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.cc-glass-2 {
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}