/* ═══════════════════════════════════════════════════════════════════════
   vibescan-tokens.css
   ---------------------------------------------------------------------
   TWO JOBS:
     1. Declare the design tokens used by the hand-written marketing page.
     2. Reconcile MudBlazor's own CSS custom properties with those tokens,
        so MudBlazor controls (dialogs, snackbars, inputs, data grids)
        sit on the same page as the marketing sections without looking
        like a different product.

   LOAD ORDER MATTERS — this file must come AFTER MudBlazor's stylesheet
   in App.razor / index.html, or none of the overrides below win:

       <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
       <link href="css/vibescan-tokens.css" rel="stylesheet" />   <-- after

   Hex values here are mirrored in VibeScanTheme.cs. Change both.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   1. FONTS
   Self-hosted (wwwroot/fonts/) rather than pulled from Google's CDN —
   a third-party request on the critical path costs a Core Web Vitals
   point on the exact product that sells Core Web Vitals scores.
   Each file is the variable-font latin subset; font-weight below
   selects a position on the variable axis, not a separate file.
   ───────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/syne-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/martian-mono-variable.woff2') format('woff2');
}

/* TX-02 (Berkeley Mono) — self-hosted, genuine .woff2 files supplied in font/ and copied to
   wwwroot/fonts/tx-02/ (the earlier docs/*.otf copies were git-crypt ciphertext, not real font
   data — Chrome silently failed to parse them and fell back to Syne/Outfit the whole time; these
   replace them). Only Regular and Bold weights were supplied, so Bold is registered across a wide
   weight range (600–900) — any heading/big-number rule asking for 700/800/900 resolves to it
   automatically rather than needing every such rule hand-edited. Scope: main page (--vs-display /
   --vs-body below) and the /pricing page only — never the members/account surface, and never
   pricing's own dialog/modal reuse (BillingDialog stays on --font-heading-regular). */
@font-face { font-family: 'TX-02'; font-style: normal; font-weight: 100 500; font-display: swap; src: url('/fonts/tx-02/TX-02-Regular.woff2') format('woff2'); }
@font-face { font-family: 'TX-02'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('/fonts/tx-02/TX-02-Bold.woff2') format('woff2'); }
@font-face { font-family: 'TX-02'; font-style: italic; font-weight: 600 900; font-display: swap; src: url('/fonts/tx-02/TX-02-Bold-Oblique.woff2') format('woff2'); }


/* ─────────────────────────────────────────────────────────────────────
   2. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* substrate */
  --vs-void:            #06070A;
  --vs-carbon:          #0C0E13;
  --vs-carbon-hi:       #12151C;
  --vs-carbon-lo:       #090A0E;

  /* silver — treated as a material, not decoration */
  --vs-platinum:        #DDE3EF;
  --vs-platinum-2:      #A8B1C4;
  --vs-platinum-dim:    #838DA0;
  --vs-platinum-ghost:  #7A8396;

  /* accents */
  --vs-indigo:          #7B70FF;
  --vs-indigo-soft:     rgba(91,77,255,.14);
  --vs-amber:           #FF8A1F;   /* ACTIONS ONLY. See rule in §5. */
  --vs-amber-soft:      rgba(255,138,31,.12);
  --vs-ice:             #7DD3FC;   /* "passed". There is no green token. */
  --vs-ice-soft:        rgba(125,211,252,.12);
  --vs-critical:        #FF3358;
  --vs-critical-soft:   rgba(255,51,88,.12);
  --vs-warn:            #FFB84D;
  --vs-warn-soft:       rgba(255,184,77,.12);

  /* text */
  --vs-ink:             #EEF1F7;
  --vs-ink-2:           #98A1B2;
  --vs-ink-3:           #636C7D;

  /* hairlines — the page is one continuous graticule */
  --vs-hair:            rgba(221,227,239,.10);
  --vs-hair-2:          rgba(221,227,239,.18);
  --vs-hair-3:          rgba(221,227,239,.30);

  /* type roles */
  --vs-display:         'TX-02', 'Syne', sans-serif;
  --vs-body:            'TX-02', 'Hanken Grotesk', system-ui, sans-serif;
  --vs-mono:            'Martian Mono', ui-monospace, monospace;

  /* geometry */
  --vs-radius:          3px;
  --vs-gutter:          clamp(16px, 4vw, 40px);
  --vs-maxw:            1240px;
}


/* ─────────────────────────────────────────────────────────────────────
   3. MUDBLAZOR VARIABLE BRIDGE
   MudBlazor generates most of these from MudTheme at runtime. They are
   restated here for the handful it does not expose through the theme
   object, and as a hard backstop if the theme fails to apply on a
   prerendered first paint (which produces a white flash otherwise).
   ───────────────────────────────────────────────────────────────────── */
/* The dark marketing page keeps its dark canvas: app.css paints <body>
   light (--color-card), and every transparent section on Index would
   composite against it. Scoped via :has so no other page is affected. */
body:has(.vs-shell) {
  background: var(--vs-void);
  color: var(--vs-ink);
}

:root,
.mud-theme-dark {
  --mud-palette-primary:                  var(--vs-indigo);
  --mud-palette-primary-text:             #FFFFFF;
  --mud-palette-primary-hover:            rgba(91,77,255,.10);
  --mud-palette-primary-darken:           #4A3DE0;
  --mud-palette-primary-lighten:          #7B70FF;

  --mud-palette-secondary:                var(--vs-platinum-2);
  --mud-palette-tertiary:                 var(--vs-amber);

  --mud-palette-success:                  var(--vs-ice);
  --mud-palette-info:                     var(--vs-indigo);
  --mud-palette-warning:                  var(--vs-warn);
  --mud-palette-error:                    var(--vs-critical);

  --mud-palette-background:               var(--vs-void);
  --mud-palette-background-gray:          var(--vs-carbon-lo);
  --mud-palette-surface:                  var(--vs-carbon);
  --mud-palette-appbar-background:        rgba(6,7,10,.80);
  --mud-palette-appbar-text:              var(--vs-ink);
  --mud-palette-drawer-background:        var(--vs-carbon);
  --mud-palette-drawer-text:              var(--vs-ink-2);

  --mud-palette-text-primary:             var(--vs-ink);
  --mud-palette-text-secondary:           var(--vs-ink-2);
  --mud-palette-text-disabled:            var(--vs-platinum-ghost);

  --mud-palette-lines-default:            var(--vs-hair);
  --mud-palette-lines-inputs:             var(--vs-hair-2);
  --mud-palette-table-lines:              var(--vs-hair);
  --mud-palette-table-hover:              rgba(221,227,239,.028);
  --mud-palette-divider:                  var(--vs-hair);
  --mud-palette-divider-light:            var(--vs-hair);

  --mud-palette-action-default:           var(--vs-platinum-dim);
  --mud-palette-action-disabled:          var(--vs-platinum-ghost);
  --mud-palette-overlay-dark:             rgba(6,7,10,.80);

  --mud-default-borderradius:             var(--vs-radius);
  --mud-typography-default-family:        var(--vs-body);
  --mud-typography-button-text-transform: none;
}


/* ─────────────────────────────────────────────────────────────────────
   4. FLATTEN MUDBLAZOR
   Material Design elevation is the single biggest thing that will make
   MudBlazor controls look foreign next to this design. The whole visual
   language is hairline borders and corner brackets — nothing floats.
   Kill the shadows and give everything a 1px hairline instead.
   ───────────────────────────────────────────────────────────────────── */
.mud-elevation-1,  .mud-elevation-2,  .mud-elevation-3,
.mud-elevation-4,  .mud-elevation-5,  .mud-elevation-6,
.mud-elevation-8,  .mud-elevation-12, .mud-elevation-16,
.mud-elevation-24 {
  box-shadow: none !important;
}

.mud-paper {
  background-color: var(--vs-carbon);
  border: 1px solid var(--vs-hair-2);
  border-radius: var(--vs-radius);
  background-image: none;
}

.mud-dialog,
.mud-popover,
.mud-menu-popover,
.mud-snackbar {
  background-color: var(--vs-carbon-hi) !important;
  border: 1px solid var(--vs-hair-2) !important;
  border-radius: var(--vs-radius) !important;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.8) !important;
}

/* Inputs: match the hero scan bar rather than Material's underline */
.mud-input-outlined .mud-input-outlined-border { border-color: var(--vs-hair-2); border-radius: var(--vs-radius); }
.mud-input.mud-input-outlined:hover  .mud-input-outlined-border { border-color: var(--vs-hair-3); }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--vs-indigo); border-width: 1px; }
.mud-input-root { font-family: var(--vs-mono); font-size: 13px; }
.mud-input-label { font-family: var(--vs-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--vs-platinum-dim); }

/* Tables & data grids: hairline graticule, mono headers */
.mud-table,
.mud-table-container { background-color: var(--vs-carbon); }
.mud-table-root { border-collapse: collapse; }
.mud-table-head .mud-table-cell,
.mud-table-cell.mud-table-head-cell {
  font-family: var(--vs-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--vs-platinum-dim);
  background: rgba(221,227,239,.03);
  border-bottom: 1px solid var(--vs-hair-2);
}
.mud-table-cell {
  border-bottom: 1px solid var(--vs-hair);
  border-right: 1px solid var(--vs-hair);
  font-size: 13.5px;
}
.mud-table-cell:last-child { border-right: 0; }

/* Buttons: no ripple lift, no uppercase */
.mud-button-root { text-transform: none; letter-spacing: 0; border-radius: var(--vs-radius); font-weight: 700; }

/* Tabs, chips, progress — pull them onto the hairline language */
.mud-tabs-toolbar { border-bottom: 1px solid var(--vs-hair-2); }
.mud-tab { text-transform: none; font-family: var(--vs-body); font-weight: 600; }
.mud-chip { border-radius: 2px; font-family: var(--vs-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.mud-progress-linear { border-radius: 0; height: 3px; }


/* ─────────────────────────────────────────────────────────────────────
   5. THE ONE RULE THAT CARRIES THE PAGE
   Everything on this site is cold — void, platinum, indigo, ice. Amber
   is the only warm hue anywhere, which is what makes the eye land on a
   call to action before conscious reading starts. That effect is
   destroyed the moment a second element goes warm.

   AMBER IS FOR: the scan button, the unlock/upgrade button, the primary
   plan CTA, the hero chip, the terminal caret.
   AMBER IS NOT FOR: headings, links, icons, borders, section labels,
   hover states, focus rings on non-actions, or any chart series.

   Severity colours are separate and must stay rationed:
     --vs-critical  only for genuine criticals. If red appears on
                    routine warnings it goes numb and the findings
                    table stops converting.
     --vs-warn      warnings only.
     --vs-ice       passed states. There is deliberately no green.
   ───────────────────────────────────────────────────────────────────── */
.vs-btn-amber {
  background: var(--vs-amber);
  color: #1B0A00;
  font-weight: 700;
  border: 0;
  border-radius: var(--vs-radius);
  padding: 13px 22px;
  box-shadow: 0 0 0 1px rgba(255,138,31,.40), 0 10px 34px -8px rgba(255,138,31,.55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.vs-btn-amber:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,138,31,.60), 0 14px 42px -8px rgba(255,138,31,.70);
}

.vs-btn-ghost {
  background: transparent;
  color: var(--vs-ink);
  border: 1px solid var(--vs-hair-3);
  border-radius: var(--vs-radius);
  padding: 13px 22px;
  font-weight: 700;
}
.vs-btn-ghost:hover { background: rgba(221,227,239,.05); border-color: var(--vs-platinum-2); }


/* ─────────────────────────────────────────────────────────────────────
   6. FLOOR
   ───────────────────────────────────────────────────────────────────── */
::selection { background: var(--vs-indigo); color: #fff; }

:focus-visible {
  outline: 2px solid var(--vs-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}