/* ==========================================================================
   FORGE MOBILE 2.0 — HOLY GRAIL VISUAL LAW R1
   GOLDEN UI DESIGN TOKEN SYSTEM
   --------------------------------------------------------------------------
   Derived from LAW_PACKAGE/02_LAW_NEW_THEME (canonical selections + clean
   counterparts) and 04_SCHEMATICS/COORDINATES_AND_LAYOUT_LAW.md.

   Every screen in this prototype consumes ONLY these custom properties for
   color, radius, spacing, type, shadow/glow and motion — no one-off literal
   values are permitted in component stylesheets. This file is the single
   source of visual truth for the prototype.
   ========================================================================== */

:root {
  /* -- Core surfaces --------------------------------------------------- */
  --bg-void: #0a0913;          /* deepest background, top-level app field */
  --bg-deep: #100e1b;          /* base app background */
  --bg-deep-2: #14111f;        /* slightly raised deep surface */
  --surface-card: rgba(255, 246, 235, 0.035);      /* resting glass card */
  --surface-card-strong: rgba(255, 246, 235, 0.06); /* emphasized card */
  --surface-card-hover: rgba(255, 246, 235, 0.075);
  --surface-sunken: rgba(0, 0, 0, 0.22);
  --surface-input: rgba(0, 0, 0, 0.28);

  /* -- Amber / gold accent (warmth, action, EnForce) -------------------- */
  --amber-100: #ffe7c2;
  --amber-300: #f7c58a;
  --amber-500: #f2a35c;
  --amber-600: #e8823f;
  --amber-700: #cf6a2b;
  --amber-glow: rgba(242, 163, 92, 0.45);
  --amber-glow-soft: rgba(242, 163, 92, 0.18);

  /* -- Violet glass accent (intelligence, EnForce entity, links) -------- */
  --violet-200: #d9d2ff;
  --violet-400: #a897f7;
  --violet-500: #8b7cf5;
  --violet-600: #6f5ce6;
  --violet-700: #5945c4;
  --violet-glow: rgba(139, 124, 245, 0.4);
  --violet-glow-soft: rgba(139, 124, 245, 0.16);

  /* -- Borders ------------------------------------------------------------ */
  --border-hairline: rgba(255, 246, 235, 0.09);
  --border-hairline-strong: rgba(255, 246, 235, 0.16);
  --border-amber: rgba(242, 163, 92, 0.45);
  --border-amber-soft: rgba(242, 163, 92, 0.22);
  --border-violet: rgba(139, 124, 245, 0.45);
  --border-violet-soft: rgba(139, 124, 245, 0.22);

  /* -- Text --------------------------------------------------------------- */
  --text-primary: #f6efe4;
  --text-secondary: #bcb4c6;
  --text-tertiary: #837c93;
  --text-inverse: #1a1420;
  --text-on-amber: #241305;

  /* -- Status truth colors (semantically distinct, never reused loosely) - */
  --status-ready: #46d38a;      /* READY */
  --status-ready-bg: rgba(70, 211, 138, 0.14);
  --status-active: #f2a35c;     /* ACTIVE / LIVE */
  --status-active-bg: rgba(242, 163, 92, 0.16);
  --status-pending: #e8c15c;    /* PENDING */
  --status-pending-bg: rgba(232, 193, 92, 0.14);
  --status-unavailable: #8b8594; /* UNAVAILABLE / COMING SOON */
  --status-unavailable-bg: rgba(139, 133, 148, 0.14);
  --status-restricted: #f0955c; /* RESTRICTED (role/authority) */
  --status-restricted-bg: rgba(240, 149, 92, 0.14);
  --status-failed: #f2685f;     /* FAILED */
  --status-failed-bg: rgba(242, 104, 95, 0.14);
  --status-sealed: #a897f7;     /* SEALED (policy-sealed / owner authority) */
  --status-sealed-bg: rgba(168, 151, 247, 0.16);

  /* -- Role badges ---------------------------------------------------- */
  --role-owner: #f2a35c;
  --role-owner-bg: rgba(242, 163, 92, 0.14);
  --role-tester: #a897f7;
  --role-tester-bg: rgba(168, 151, 247, 0.14);
  --role-analyst: #7cc7f2;
  --role-analyst-bg: rgba(124, 199, 242, 0.14);

  /* -- Radii ------------------------------------------------------------ */
  --radius-xl: 26px;   /* hero / shell frame */
  --radius-lg: 22px;   /* primary card */
  --radius-md: 16px;   /* secondary card */
  --radius-sm: 12px;   /* chip / input */
  --radius-pill: 999px;

  /* -- Spacing scale ------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;

  /* -- Layout ------------------------------------------------------------- */
  --safe-inset: 20px;
  --touch-min: 44px;
  --phone-max: 428px;
  --tablet-max: 880px;

  /* -- Type scale (Inter-family stack; system fallback keeps it fast) ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-display: 32px;
  --lh-tight: 1.15;
  --lh-normal: 1.4;
  --lh-loose: 1.6;

  /* -- Shadow / glow ------------------------------------------------------ */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.45);
  --glow-amber-sm: 0 0 18px var(--amber-glow-soft);
  --glow-amber-lg: 0 0 46px var(--amber-glow);
  --glow-violet-sm: 0 0 18px var(--violet-glow-soft);
  --glow-violet-lg: 0 0 46px var(--violet-glow);

  /* -- Motion -------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-instant: 90ms;
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 440ms;
  --dur-ambient: 5200ms;

  color-scheme: dark;
}

/* ERADICATE C14: scoped checkboxes retain native labels and inline alignment. */
.vivian-first-use-card label.vivian-check-label{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.vivian-first-use-card label.vivian-check-label input[type="checkbox"]{width:18px;height:18px;flex:0 0 18px;margin:2px 0 0;padding:0;accent-color:var(--amber-400)}

/* ERADICATE C23 support for the unapplied protected ui.js proposal.
   Higher specificity preserves delays after app/access animation shorthands. */
.crystal .facet-delay-crown-0{animation-delay:0.00s}
.crystal .facet-delay-crown-1{animation-delay:0.34s}
.crystal .facet-delay-crown-2{animation-delay:0.68s}
.crystal .facet-delay-crown-3{animation-delay:1.02s}
.crystal .facet-delay-crown-4{animation-delay:1.36s}
.crystal .facet-delay-crown-5{animation-delay:1.70s}
.crystal .facet-delay-pavilion-0{animation-delay:0.15s}
.crystal .facet-delay-pavilion-1{animation-delay:0.49s}
.crystal .facet-delay-pavilion-2{animation-delay:0.83s}
.crystal .facet-delay-pavilion-3{animation-delay:1.17s}
.crystal .facet-delay-pavilion-4{animation-delay:1.51s}
.crystal .facet-delay-pavilion-5{animation-delay:1.85s}
/* Auto uses the SVG's intrinsic numeric attributes instead of the later
   generic/responsive author dimensions. Scope this to proposed markup only. */
.crystal.crystal-csp{width:auto;height:auto}
.crystal-wrap-csp > .crystal-frame{width:auto;height:auto}
.crystal-wrap.crystal-wrap-csp{width:max-content;height:max-content}
.crystal-wrap-csp > .crystal{position:absolute}