/* ============================================================
   Morphism layer — glass, clay and soft-UI depth over the
   existing "Ledger, Vivid" system.

   WHY A LAYER AND NOT A REWRITE

   The base system carries the structure: the grid, the category
   hues, the hairline rules, the type scale. All of that still
   works and all of it is under test. This file adds depth and
   material on top of it, so the site gains a surface treatment
   without losing the bones — and so it can be removed with one
   <link> if it ever stops earning its place.

   WHICH MORPHISM WHERE, AND WHY NOT ALL OF THEM EVERYWHERE

   - GLASS on things that float over the aurora: the header, the
     hero search, panels. Glass needs something colourful behind
     it or it is just a grey box, and the aurora is exactly that.
   - CLAY on the things you press: tool tiles and buttons. Clay's
     whole point is tactility, so it belongs where there is touch.
   - SOFT UI (the accessible evolution, not pure neumorphism) on
     inputs and small surfaces.

   Pure neumorphism is deliberately NOT used for anything a person
   has to read or hit accurately. Its own material metaphor puts
   text on the same surface as its shadow, which is a contrast
   problem by construction, and it breaks entirely in dark mode
   where there is no light source to extrude from. Depth is worth
   having; depth that costs legibility is not.

   Every effect below degrades: @supports guards the blur, and
   prefers-reduced-motion removes the movement while keeping the
   material.
   ============================================================ */

:root {
  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-brd: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
  --glass-blur: blur(16px) saturate(1.6);

  /* Clay — an outer drop plus two inner strokes, which is what makes
     a surface read as inflated rather than merely rounded. */
  --clay-shadow:
    0 12px 24px -8px rgba(15, 23, 42, 0.18),
    0 4px 8px -4px rgba(15, 23, 42, 0.10),
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px rgba(15, 23, 42, 0.06);
  --clay-shadow-press:
    0 4px 10px -6px rgba(15, 23, 42, 0.20),
    inset 0 2px 5px rgba(15, 23, 42, 0.10),
    inset 0 -1px 1px rgba(255, 255, 255, 0.7);
  --clay-radius: 22px;

  /* Soft UI Evolution — visible depth that still passes contrast. */
  --soft-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 16px -8px rgba(15, 23, 42, 0.10);
  --soft-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.08);

  --morph-ease: cubic-bezier(.22, 1, .36, 1);
  --morph-fast: 180ms;
  --morph-base: 260ms;
}

/* ---------------------------------------------------------- glass */

.site-header {
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  position: sticky;
  top: 0;
  z-index: 50;
}

.hero-search,
.lt-dash-intro,
.ss-panel,
.tool-header {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .site-header,
  .hero-search,
  .lt-dash-intro,
  .ss-panel,
  .tool-header {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  /* Only lighten the fill once the blur is genuinely doing the work.
     Without the blur these values are simply washed-out text. */
  .site-header { background: rgba(255, 255, 255, 0.72); }
  .hero-search,
  .lt-dash-intro,
  .ss-panel,
  .tool-header { background: rgba(255, 255, 255, 0.55); }
}

/* ----------------------------------------------------------- clay */

.tool-tile,
.lt-card {
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition:
    transform var(--morph-base) var(--morph-ease),
    box-shadow var(--morph-base) var(--morph-ease);
  will-change: transform;
}

.tool-tile:hover,
.lt-card:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow:
    0 20px 36px -10px rgba(15, 23, 42, 0.22),
    0 8px 14px -6px rgba(15, 23, 42, 0.12),
    inset 0 2px 3px rgba(255, 255, 255, 0.98),
    inset 0 -3px 8px rgba(15, 23, 42, 0.07);
}

/* The squish. This is the entire reason clay is worth having on a
   pressable thing — the surface has to give. */
.tool-tile:active,
.lt-card:active,
.btn:active,
.ss-copy:active {
  transform: scale(0.975);
  box-shadow: var(--clay-shadow-press);
  transition-duration: var(--morph-fast);
}

.btn,
.ss-copy,
button.ghost {
  border-radius: 14px;
  box-shadow: var(--clay-shadow);
  transition:
    transform var(--morph-fast) var(--morph-ease),
    box-shadow var(--morph-fast) var(--morph-ease);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px -10px rgba(15, 23, 42, 0.26),
    inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

.tile-icon {
  border-radius: 16px;
  box-shadow: var(--soft-shadow), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* -------------------------------------------------------- soft ui */

input[type="text"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  border-radius: 12px;
  box-shadow: var(--soft-shadow-inset);
  transition: box-shadow var(--morph-fast) var(--morph-ease),
              border-color var(--morph-fast) var(--morph-ease);
}

/* Focus stays a real, high-contrast ring. Soft UI's failure mode is a
   focus state you cannot see, and a keyboard user then cannot use the
   page at all — no amount of material is worth that. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent, #059669);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent, #059669) 22%, transparent);
}

/* ------------------------------------------------------ dark mode */

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgba(20, 27, 45, 0.62);
    --glass-bg-strong: rgba(15, 20, 34, 0.86);
    --glass-brd: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    /* Clay in the dark: the inner highlight has to weaken or every card
       gets a white rim, which is the giveaway that a light-mode shadow
       stack was reused without being re-thought. */
    --clay-shadow:
      0 12px 24px -8px rgba(0, 0, 0, 0.55),
      0 4px 8px -4px rgba(0, 0, 0, 0.35),
      inset 0 1px 1px rgba(255, 255, 255, 0.10),
      inset 0 -3px 6px rgba(0, 0, 0, 0.30);
    --clay-shadow-press:
      0 3px 8px -5px rgba(0, 0, 0, 0.6),
      inset 0 2px 6px rgba(0, 0, 0, 0.45);
    --soft-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  }
  @supports (backdrop-filter: blur(4px)) {
    .site-header { background: rgba(15, 20, 34, 0.72); }
    .hero-search,
    .lt-dash-intro,
    .ss-panel,
    .tool-header { background: rgba(20, 27, 45, 0.55); }
  }
  .tool-tile,
  .lt-card { border-color: rgba(255, 255, 255, 0.08); }
}

/* --------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .tool-tile,
  .lt-card,
  .btn,
  .ss-copy,
  button.ghost,
  input,
  select,
  textarea {
    transition: none;
  }
  /* The material stays; only the movement goes. Someone who has asked
     for less motion has not asked for a flatter page. */
  .tool-tile:hover,
  .lt-card:hover,
  .btn:hover,
  .tool-tile:active,
  .lt-card:active,
  .btn:active { transform: none; }
}