/* atrovia-glass.css — the Atrovia Glass Tile, ONE stylesheet for every app.
   Served from the shell at https://app.atrovia.co/atrovia-glass.css and linked by the shell,
   the CRM (Kova, incl. Operations, Finance and the Vortex Field frame) and Marketing. Nothing
   here is copied into those apps: they link this file and keep only their own mapping — which
   of their elements wear the class, and which of their palette colours the tokens are made of.

   Austin's spec (2026-09-25): every surface is a pane of glass on a lit ground. The ground is
   one deep field with a soft aurora wash; a tile is a translucent fill, a blurred backdrop, a
   1px hairline, a faint prismatic rim and a thin highlight along its top edge. Structure is
   depth, never colour — and nothing here moves the tenant's palette, fonts or buttons.

   HOW AN APP USES IT
     <html data-vxc="dark">          dark tokens (absent, or "light": the light ones). Any
                                     element can carry it, so a dark module inside a light app
                                     (Operations, Finance) pins its own subtree.
     class="atrovia-ground"          the lit ground, on the main content background
     class="atrovia-glass"           a tile
     class="atrovia-glass-sub"       a recessed area inside a tile: flat, no blur
   An app whose tenant picks a palette re-declares --vxc-ground / --vxc-tile-bg / --vxc-solid /
   --vxc-a1 from it (any selector beats these: every token block is wrapped in :where(), so it
   has no specificity and link order never matters). The navy below is the default palette's.

   WHAT IT NEVER TOUCHES: documents and print. Everything is inside @media screen, and no app
   puts the class inside a document root (.doc, .printsheet, the quote and PDF previews). */

@media screen {

  /* ── Tokens ─────────────────────────────────────────────────────────────── */
  :where(:root, [data-vxc="light"]) {
    --vxc-ground: #EEF2F8;
    --vxc-a1: rgba(107, 214, 84, .12);   /* green */
    --vxc-a2: rgba(59, 130, 246, .12);   /* blue  */
    --vxc-a3: rgba(45, 212, 191, .10);   /* teal  */
    --vxc-tile: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .80));
    --vxc-tile-bg: rgba(255, 255, 255, .66);
    --vxc-sub: rgba(255, 255, 255, .52);
    --vxc-line: rgba(16, 34, 70, .11);
    --vxc-line-2: rgba(16, 34, 70, .18);
    --vxc-ink: #101F3A;
    --vxc-muted: #5B6A84;
    --vxc-accent: #2F7A34;
    --vxc-accent-soft: rgba(47, 122, 52, .10);
    --vxc-press: rgba(47, 122, 52, .08);
    --vxc-blur: blur(10px) saturate(1.15);
    /* Not in the spec's table, but the spec asks for each: the solid surface a tile falls back
       to, the shadow, the top highlight and the rim's strength. */
    --vxc-solid: #FBFCFE;
    --vxc-shadow: 0 1px 2px rgba(16, 34, 70, .06), 0 10px 26px rgba(16, 34, 70, .08);
    --vxc-hl: rgba(255, 255, 255, 1);
    --vxc-rim-opacity: .55;
    --vxc-r-tile: 12px;
    --vxc-r-bar: 8px;
    --vxc-r-pill: 20px;
  }
  :where([data-vxc="dark"]) {
    --vxc-ground: #060C1C;
    --vxc-a1: rgba(107, 214, 84, .12);
    --vxc-a2: rgba(59, 130, 246, .16);
    --vxc-a3: rgba(45, 212, 191, .12);
    /* The spec says .085 → .030. Measured over the aurora's brightest point that lifted the
       tile far enough to take every app's dimmest text step under 4.5:1 (Marketing's dim
       #8089AC: 3.79). At .06 → .02, with a palette's tile made of its canvas (see each app's
       mapping), the worst step on the worst palette is 4.56. */
    --vxc-tile: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    --vxc-tile-bg: rgba(11, 25, 61, .44);
    --vxc-sub: rgba(8, 18, 44, .42);
    --vxc-line: rgba(255, 255, 255, .12);
    --vxc-line-2: rgba(255, 255, 255, .20);
    --vxc-ink: #F2F6FF;
    --vxc-muted: #A6B2CB;
    --vxc-accent: #6BD654;
    --vxc-accent-soft: rgba(107, 214, 84, .14);
    /* Press is the accent-soft idea at 8%, laid over the hover tint rather than over the bare
       tile: at .14 straight on the tile it lightened dark tiles to 3.4:1 for the dim step. */
    --vxc-press: rgba(107, 214, 84, .08);
    --vxc-blur: blur(11px) saturate(1.3);
    --vxc-solid: #0E1936;
    --vxc-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 14px 34px rgba(0, 0, 0, .42);
    --vxc-hl: rgba(255, 255, 255, .42);
  }
  /* Both modes. Declared on every mode root so a dark subtree re-resolves them from its own
     a1–a3 rather than inheriting the page's already-computed aurora. */
  :where(:root, [data-vxc]) {
    --vxc-aurora:
      radial-gradient(60% 55% at 10% 0%, var(--vxc-a1), transparent 70%),
      radial-gradient(55% 50% at 92% 12%, var(--vxc-a2), transparent 70%),
      radial-gradient(70% 60% at 60% 100%, var(--vxc-a3), transparent 72%);
    /* green → teal → blue → violet → clear → green, at 135°. Fixed hues on purpose: the rim is
       the glass's edge catching light, not a brand colour, so it is the same on every palette. */
    --vxc-rim: linear-gradient(135deg, #6BD654, #2DD4BF 22%, #3B82F6 44%, #8B5CF6 62%, transparent 80%, #6BD654);
  }

  /* ── The lit ground ─────────────────────────────────────────────────────── */
  /* Static: no animation. Fixed to the viewport so a long page scrolls over the same light
     instead of leaving the aurora behind at the top. */
  .atrovia-ground {
    background-color: var(--vxc-ground);
    background-image: var(--vxc-aurora);
    background-attachment: fixed;
  }

  /* ── The tile: five layers ──────────────────────────────────────────────── */
  /* Position and radius at zero specificity: the rim and highlight need a positioned box, and
     any position or radius the app already gives its card must still win. */
  :where(.atrovia-glass) {
    position: relative;
    border-radius: var(--vxc-r-tile);
  }
  .atrovia-glass {
    /* The state layer and the fill are reset here so a tile nested in a hovered tile does not
       inherit its parent's hover. */
    --vxc-state: linear-gradient(transparent, transparent);
    --vxc-fill: var(--vxc-tile-bg);
    /* 1. Fill — the gradient over the translucent base (and the hover/press tint over both). */
    background: var(--vxc-state), var(--vxc-tile), var(--vxc-fill);
    /* 3. Border — 1px, never thicker. */
    border: 1px solid var(--vxc-line);
    box-shadow: var(--vxc-shadow);
  }
  /* 2. Backdrop — but NEVER on a tile holding a dialog. backdrop-filter makes the tile the
     containing block for every position:fixed descendant, so a dialog rendered inside a tile
     would be laid out inside the tile instead of over the viewport. Portaled dialogs are fine. */
  .atrovia-glass:not(:has([role="dialog"], [aria-modal="true"])) {
    -webkit-backdrop-filter: var(--vxc-blur);
    backdrop-filter: var(--vxc-blur);
  }
  /* 4. Prismatic rim — a 1px ring painted with the rim gradient and masked to the ring only. */
  .atrovia-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--vxc-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: var(--vxc-rim-opacity, .55);
    pointer-events: none;
  }
  /* 5. Top highlight — a hairline of light along the top edge, fading at both ends. */
  .atrovia-glass::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vxc-hl), transparent);
    pointer-events: none;
  }
  /* Hover and press are tint changes — no lift, no movement, nothing animated, so there is
     nothing for Reduce motion to switch off. */
  .atrovia-glass:hover { --vxc-state: linear-gradient(var(--vxc-sub), var(--vxc-sub)); }
  .atrovia-glass:active {
    --vxc-state: linear-gradient(var(--vxc-press), var(--vxc-press)), linear-gradient(var(--vxc-sub), var(--vxc-sub));
  }

  /* A recessed region inside a tile: flat, no gradient, no blur. */
  .atrovia-glass-sub { background: var(--vxc-sub); }
}

/* ── Fallbacks ────────────────────────────────────────────────────────────── */
/* Nothing to frost with, or the person asked for less see-through: the tile goes back on a
   SOLID near-tile surface, or it would be text over whatever happens to be behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .atrovia-glass { --vxc-fill: var(--vxc-solid); --vxc-blur: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .atrovia-glass { --vxc-fill: var(--vxc-solid); --vxc-blur: none; }
}