/* Vrymdor maison tokens, v2 "Midnight and Pearl" (owner direction 2026-11-04, after modern_luxury.jpg): the one
   source of the look for every Vrymdor surface (vrymdor.com, the customer dashboard at app.vrymdor.com, the operator
   consoles, the Central Guardian HUD, the Vrymdor app, sign in, the guides, demos and email). Import this file
   first, then build only from these variables. Dark (Midnight) is the default; light (Pearl) follows the OS unless
   the person chose one (data-theme on <html>). The rules are in LUXURY_GUIDE.md at the root of
   vrymnox-founders-landing. Every ink and ground pairing below holds WCAG AA in both themes (checked: body ink 14:1
   and up, muted 7:1 and up, faint 5:1 and up, azure, gold and status 4.8:1 and up, interactive borders 3.5:1 and up).

   Two accents, two jobs:
     azure  is information and state: links, the active nav item, focus, selection, charts, live indicators.
     gold   is value and decision: the one primary action (as --vx-cta), approvals, the hardware key, prices,
            alerts that need a person. Gold is warm amber light, never a large flat area.

   Fonts (self host, OFL): Cormorant Garamond 300, 400, 500 and italic (display, marketing and sign in moments);
   Inter 400, 500, 600 (all interface text, app headings); JetBrains Mono (labels, identifiers, numerals in tables).
   Never load fonts from a third party at runtime. */
:root {
  /* Grounds: midnight sapphire, never pure black */
  --vx-ground: #070b17;
  --vx-ground-2: #0c1326;
  --vx-ground-3: #141d36;
  /* Glass panels (cards, the sidebar, menus) */
  --vx-panel: rgb(20 30 56 / .62);
  --vx-panel-solid: #111a31;
  --vx-panel-hi: rgb(160 190 255 / .10);
  --vx-glass: rgb(9 14 30 / .66);
  --vx-blur: 18px;
  /* Inks */
  --vx-ink: #eef3fc;
  --vx-muted: rgb(238 243 252 / .72);
  --vx-faint: rgb(238 243 252 / .6);
  /* Azure: information and state */
  --vx-azure: #7cb0ff;
  --vx-azure-hi: #b4d1ff;
  --vx-azure-lo: #3d73e8;
  --vx-on-azure: #06101f;
  --vx-azure-wash: rgb(124 176 255 / .12);
  --vx-azure-glow: 0 0 0 1px rgb(124 176 255 / .45), 0 0 32px -4px rgb(91 140 255 / .55);
  /* Gold: warm amber light for value and decision */
  --vx-gold: #f5b544;
  --vx-gold-hi: #ffd68c;
  --vx-gold-lo: #e0921f;
  --vx-on-gold: #160e02;
  --vx-gold-wash: rgb(245 181 68 / .12);
  --vx-gold-glow: 0 0 0 1px rgb(245 181 68 / .5), 0 0 32px -4px rgb(245 160 40 / .5);
  /* The one primary button */
  --vx-cta: #f5b544;
  --vx-cta-hi: #ffd68c;
  --vx-cta-lo: #e0921f;
  --vx-on-cta: #160e02;
  /* Lines */
  --vx-line: rgb(124 176 255 / .24);
  --vx-line-soft: rgb(238 243 252 / .09);
  /* Interactive borders (inputs, line buttons) hold 3:1 against every ground (WCAG 1.4.11). */
  --vx-line-strong: rgb(143 178 236 / .62);
  --vx-line-gold: rgb(245 181 68 / .42);
  /* Status (functional only, never decoration) */
  --vx-ok: #5ad79b;
  --vx-warn: #ffc266;
  --vx-bad: #ff8f80;
  /* Depth */
  --vx-shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 24px 60px -28px rgb(0 0 0 / .8);
  --vx-shadow-sm: 0 1px 0 rgb(255 255 255 / .04) inset, 0 10px 24px -16px rgb(0 0 0 / .7);
  /* Atmosphere: the two lights of the film, behind content only */
  --vx-aurora: radial-gradient(60% 50% at 18% 0%, rgb(61 115 232 / .22), transparent 70%),
    radial-gradient(45% 40% at 92% 8%, rgb(245 160 40 / .12), transparent 70%);

  /* Type */
  --vx-font-display: "Cormorant Garamond", Georgia, serif;
  --vx-font-text: "Inter", system-ui, sans-serif;
  --vx-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --vx-display-xl: clamp(3rem, 7.6vw, 7.25rem);
  --vx-display-l: clamp(2.5rem, 5.4vw, 5rem);
  --vx-display-m: clamp(1.9rem, 3.4vw, 3rem);
  --vx-display-s: clamp(1.45rem, 2.1vw, 1.9rem);
  --vx-title: clamp(1.5rem, 2.2vw, 2rem);
  --vx-lede: clamp(1.08rem, 1.35vw, 1.3rem);
  --vx-body: 1.0625rem;
  --vx-ui: .9375rem;
  --vx-small: .875rem;
  --vx-label: .68rem;
  --vx-tracking-label: .2em;
  --vx-tracking-eyebrow: .24em;

  /* Space and shape: soft, precise corners */
  --vx-wrap: 1280px;
  --vx-gutter: clamp(16px, 4vw, 48px);
  --vx-section: clamp(88px, 12vw, 184px);
  --vx-radius: 16px;
  --vx-radius-sm: 10px;
  --vx-radius-xs: 6px;
  --vx-radius-pill: 999px;

  /* Motion */
  --vx-ease: cubic-bezier(.22, 1, .36, 1);
  --vx-ease-io: cubic-bezier(.65, 0, .35, 1);
  --vx-reveal: 1000ms;
  --vx-stagger: 80ms;
  --vx-hover: 320ms;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --vx-ground: #f4f7fc;
  --vx-ground-2: #e9eef8;
  --vx-ground-3: #dce4f2;
  --vx-panel: rgb(255 255 255 / .78);
  --vx-panel-solid: #ffffff;
  --vx-panel-hi: rgb(255 255 255 / .9);
  --vx-glass: rgb(244 247 252 / .74);
  --vx-ink: #0a1328;
  --vx-muted: rgb(10 19 40 / .74);
  --vx-faint: rgb(10 19 40 / .64);
  --vx-azure: #1d55d4;
  --vx-azure-hi: #3d74f0;
  --vx-azure-lo: #143d9e;
  --vx-on-azure: #ffffff;
  --vx-azure-wash: rgb(29 85 212 / .08);
  --vx-azure-glow: 0 0 0 1px rgb(29 85 212 / .35), 0 12px 32px -12px rgb(29 85 212 / .35);
  --vx-gold: #8a4e00;
  --vx-gold-hi: #b86a05;
  --vx-gold-lo: #6b3c00;
  --vx-on-gold: #ffffff;
  --vx-gold-wash: rgb(242 166 52 / .14);
  --vx-gold-glow: 0 0 0 1px rgb(224 138 18 / .45), 0 12px 32px -12px rgb(224 138 18 / .4);
  --vx-cta: #f2a634;
  --vx-cta-hi: #ffc35c;
  --vx-cta-lo: #e08a12;
  --vx-on-cta: #1a0f00;
  --vx-line: rgb(29 85 212 / .2);
  --vx-line-soft: rgb(10 19 40 / .1);
  --vx-line-strong: rgb(58 90 150 / .78);
  --vx-line-gold: rgb(138 78 0 / .4);
  --vx-ok: #18703f;
  --vx-warn: #7f4a00;
  --vx-bad: #a8341f;
  --vx-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 24px 48px -28px rgb(20 40 90 / .28);
  --vx-shadow-sm: 0 1px 0 rgb(255 255 255 / .9) inset, 0 8px 20px -14px rgb(20 40 90 / .24);
  --vx-aurora: radial-gradient(60% 50% at 18% 0%, rgb(61 115 232 / .12), transparent 70%),
    radial-gradient(45% 40% at 92% 8%, rgb(242 166 52 / .12), transparent 70%);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --vx-ground: #f4f7fc; --vx-ground-2: #e9eef8; --vx-ground-3: #dce4f2; --vx-panel: rgb(255 255 255 / .78);
    --vx-panel-solid: #ffffff; --vx-panel-hi: rgb(255 255 255 / .9); --vx-glass: rgb(244 247 252 / .74);
    --vx-ink: #0a1328; --vx-muted: rgb(10 19 40 / .74); --vx-faint: rgb(10 19 40 / .64);
    --vx-azure: #1d55d4; --vx-azure-hi: #3d74f0; --vx-azure-lo: #143d9e; --vx-on-azure: #ffffff;
    --vx-azure-wash: rgb(29 85 212 / .08); --vx-azure-glow: 0 0 0 1px rgb(29 85 212 / .35), 0 12px 32px -12px rgb(29 85 212 / .35);
    --vx-gold: #8a4e00; --vx-gold-hi: #b86a05; --vx-gold-lo: #6b3c00; --vx-on-gold: #ffffff;
    --vx-gold-wash: rgb(242 166 52 / .14); --vx-gold-glow: 0 0 0 1px rgb(224 138 18 / .45), 0 12px 32px -12px rgb(224 138 18 / .4);
    --vx-cta: #f2a634; --vx-cta-hi: #ffc35c; --vx-cta-lo: #e08a12; --vx-on-cta: #1a0f00;
    --vx-line: rgb(29 85 212 / .2); --vx-line-soft: rgb(10 19 40 / .1); --vx-line-strong: rgb(58 90 150 / .78);
    --vx-line-gold: rgb(138 78 0 / .4); --vx-ok: #18703f; --vx-warn: #7f4a00; --vx-bad: #a8341f;
    --vx-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 24px 48px -28px rgb(20 40 90 / .28);
    --vx-shadow-sm: 0 1px 0 rgb(255 255 255 / .9) inset, 0 8px 20px -14px rgb(20 40 90 / .24);
    --vx-aurora: radial-gradient(60% 50% at 18% 0%, rgb(61 115 232 / .12), transparent 70%),
      radial-gradient(45% 40% at 92% 8%, rgb(242 166 52 / .12), transparent 70%);
    color-scheme: light;
  }
}

/* Shared component recipes, so every surface draws the same panel, button and status. Optional: an app may use
   these classes or rebuild them from the tokens, but the result must look the same. */
.vx-panel { background: var(--vx-panel); border: 1px solid var(--vx-line-soft); border-radius: var(--vx-radius);
  box-shadow: var(--vx-shadow); -webkit-backdrop-filter: blur(var(--vx-blur)); backdrop-filter: blur(var(--vx-blur)); }
.vx-panel-live { border-color: var(--vx-line); box-shadow: var(--vx-azure-glow); }
.vx-panel-alert { border-color: var(--vx-line-gold); background: linear-gradient(180deg, var(--vx-gold-wash), transparent), var(--vx-panel);
  box-shadow: var(--vx-gold-glow); }
.vx-btn-cta { background: linear-gradient(180deg, var(--vx-cta-hi), var(--vx-cta) 45%, var(--vx-cta-lo)); color: var(--vx-on-cta);
  border-radius: var(--vx-radius-sm); }
.vx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--vx-radius-pill);
  border: 1px solid var(--vx-line-soft); font: 500 var(--vx-label)/1.4 var(--vx-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.vx-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }