/* NomNum theme (R1: the midnight glass revamp). This file OWNS
   color: it is the only file in the repository allowed to contain a color
   value. The owner's brief for this pass: "glass but dark dark blue and dark
   maroon and yellow", full redesign depth. So the room goes dark - a near-
   black navy field with blue, maroon and gold light bleeding through dark
   glass panels - and the jewel duty splits: ROYAL BLUE glass carries the
   doors and selected states, MAROON glass carries the day's own cards, and
   YELLOW is the action color (primary pills carry navy ink on gold) plus
   every small emphasis. Floors measured, not assumed: white on the blue and
   maroon jewels 6.5 to 13.9, navy ink on gold 12.0, light text on the field
   17.0, the provenance ramp 1.43/3.28/3.64. Maroon never touches an
   overflow or danger state - the no-shame rule keeps the red family away
   from judgment, so overflow and warnings stay gold. Owner theme samples are
   expected; retunes land here and nowhere else. */
html[data-theme='peacock'] {
  /* level 1: the field. Near-black navy, with the three family lights
     glowing in it - blue, maroon and a faint gold - because dark glass is
     only visible when something behind it is alight. */
  --field-a: #0a0f1e;
  --field-b: #161c38;
  --blob-1: rgba(44, 74, 168, 0.4);
  /* raised .38 -> .5 when the gate's panels became real glass: at .38 the
     maroon third of the triad died behind any translucent surface and the
     owner read the page as "everything is the same color" */
  --blob-2: rgba(124, 30, 52, 0.5);
  /* the SWISH: a broad diagonal maroon ribbon across the field, owner-asked
     ("in every page add the maroon tint like a swish more prominently").
     Two stops of the maroon pair so the band has its own depth; it darkens
     and saturates the ground, so the light-ink floors only gain. */
  --swish-a: rgba(124, 30, 52, 0.34);
  --swish-b: rgba(88, 20, 40, 0.42);
  --blob-3: rgba(245, 200, 76, 0.1);

  /* level 2: frost, now dark glass. Thin enough that the field's glows read
     through; light text composites at 15:1 on it. frost-solid stays
     near-opaque for the topbar and dialogs, which answer to topbar-glass's
     structure budget and legibility, not to mood. */
  --frost-a: rgba(20, 30, 58, 0.55);
  --frost-b: rgba(10, 16, 34, 0.35);
  --frost-solid-a: rgba(16, 24, 48, 0.94);
  --frost-solid-b: rgba(9, 14, 30, 0.96);

  /* level 3: the jewels, two families. Royal blue is the structural jewel
     (doors, key CTAs, chosen states); maroon is the warm jewel the day's own
     cards wear. Both carry white text on every composited stop (blue
     8.47/12.08, cta 6.49/9.87, maroon 10.65/13.90 measured) and both sit
     LIGHTER than the frost behind them - on a dark field importance maps to
     luminance upward. */
  --deep-a: rgba(44, 74, 168, 0.92);
  --deep-b: rgba(30, 50, 120, 0.94);
  --deep-cta-a: rgba(56, 92, 200, 0.92);
  --deep-cta-b: rgba(38, 62, 150, 0.94);
  --maroon-a: rgba(124, 30, 52, 0.92);
  --maroon-b: rgba(88, 20, 40, 0.94);
  --gloss: rgba(255, 255, 255, 0.22);
  --gloss-soft: rgba(255, 255, 255, 0.12);

  --rim-top: rgba(255, 255, 255, 0.28);
  --rim: rgba(255, 255, 255, 0.1);

  /* text: light ink on the dark surfaces, white on the jewels, NAVY on gold.
     The name --text survives from F1 because the token chains in tokens.css
     read it hundreds of times; --ink is the app-wide text alias and on a
     dark theme the text color is light. */
  --ink: #eef2fa;
  --ink-2: rgba(238, 242, 250, 0.72);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --on-deep: #ffffff;
  --on-deep-2: rgba(255, 255, 255, 0.82);
  --navy-ink: #0a0f1e;
  /* the family's emphasis ink: gold, 12.0:1 on the field */
  --family-ink: #f5c84c;

  /* accents. gold is THE action color (12.0:1 under navy ink as a fill,
     12.0:1 as text on the field); royal is the blue fill family; the two
     lights are the pale blue and pale gold the progress ramp uses. The warm
     roles (sand) keep their names and turn gold; maroon stays OUT of the
     state colors by design - no-shame bars the red family from judgment. */
  --gold: #f5c84c;
  --gold-deep: #d6a42a;
  --gold-soft: #f7d87a;
  --royal: #3c64c8;
  --royal-light: #8fb2f0;
  --lagoon: var(--royal);
  --lagoon-ink: var(--royal);
  --aqua: var(--royal-light);
  --mint: var(--gold-soft);
  --sand: var(--gold);
  --sand-ink: var(--gold);

  --shadow-card: 0 18px 44px rgba(2, 5, 14, 0.55);
  --glow-primary: 0 12px 36px rgba(56, 92, 200, 0.38);
  --glow-warm: 0 12px 36px rgba(124, 30, 52, 0.42);
  /* the PRIMARY pill is gold and carries navy ink; its press deepens the
     gold rather than dimming to gray */
  --grad-btn: linear-gradient(135deg, #f7cf5e, #e2ab32);
  --grad-btn-press: linear-gradient(135deg, #dfb13e, #c2931f);
  --track: rgba(255, 255, 255, 0.16);
  --grad-fill: linear-gradient(90deg, var(--royal-light), var(--royal));

  /* deep touch on dark: the press sinks into shadow, the lift catches rim
     light */
  --press-well: inset 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --lift-shadow: 0 24px 56px rgba(2, 5, 14, 0.65);
}

html[data-theme='peacock'] body {
  color: var(--ink);
  background:
    radial-gradient(760px at 12% 6%, var(--blob-1), transparent 62%),
    radial-gradient(1050px at 88% 30%, var(--blob-2), transparent 62%),
    radial-gradient(700px at 35% 96%, var(--blob-3), transparent 55%),
    linear-gradient(115deg, transparent 34%, var(--swish-a) 48%, var(--swish-b) 58%, transparent 74%),
    linear-gradient(168deg, var(--field-a), var(--field-b));
  background-attachment: fixed;
}

:where(html[data-theme='peacock']) :is(.frost, .frost-solid, .deep, .deep-cta, .deep-warm) {
  border: 1px solid var(--rim);
  border-top-color: var(--rim-top);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-radius: 20px;
}
/* dark glass depth: a thin rim light on top, a soft falloff below */
:where(html[data-theme='peacock']) .frost {
  background: linear-gradient(150deg, var(--frost-a), var(--frost-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 10px 30px rgba(2, 5, 14, 0.4);
}
/* dialogs, sheets, dropdowns and toasts: same family at higher opacity, so
   they stay legible over whatever scrolls behind them */
:where(html[data-theme='peacock']) .frost-solid {
  background: linear-gradient(150deg, var(--frost-solid-a), var(--frost-solid-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-card);
}
/* the jewels carry their own text color: descendants inherit white, and the
   gloss layers are background layers, never pseudo-elements, so they cannot
   intercept a click. On the dark field the jewels GLOW rather than sink. */
:where(html[data-theme='peacock']) .deep {
  background:
    linear-gradient(115deg, var(--gloss), transparent 46%),
    radial-gradient(120% 90% at 18% 0%, var(--gloss-soft), transparent 48%),
    linear-gradient(140deg, var(--deep-a), var(--deep-b));
  color: var(--on-deep);
  border-top-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -14px 30px rgba(0, 0, 0, 0.3),
    var(--shadow-card),
    var(--glow-primary);
}
:where(html[data-theme='peacock']) .deep-cta {
  background:
    linear-gradient(115deg, var(--gloss), transparent 46%),
    radial-gradient(120% 90% at 18% 0%, var(--gloss-soft), transparent 48%),
    linear-gradient(140deg, var(--deep-cta-a), var(--deep-cta-b));
  color: var(--on-deep);
  border-top-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -14px 30px rgba(0, 0, 0, 0.3),
    var(--shadow-card),
    var(--glow-primary);
}
/* the warm jewel: maroon glass for the day's own cards - never a state
   color, never an alarm, just the second gem in the room */
:where(html[data-theme='peacock']) .deep-warm {
  background:
    linear-gradient(115deg, var(--gloss), transparent 46%),
    radial-gradient(120% 90% at 18% 0%, var(--gloss-soft), transparent 48%),
    linear-gradient(140deg, var(--maroon-a), var(--maroon-b));
  color: var(--on-deep);
  border-top-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -14px 30px rgba(0, 0, 0, 0.32),
    var(--shadow-card),
    var(--glow-warm);
}
:where(html[data-theme='peacock']) .chip {
  background: linear-gradient(150deg, var(--frost-a), var(--frost-b));
  border: 1px solid var(--rim);
  border-top-color: var(--rim-top);
  border-radius: 999px;
  color: var(--ink);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* generic buttons are blue glass; the PRIMARY variant is overridden to gold
   in the app stylesheet and carries --navy-ink */
:where(html[data-theme='peacock']) .btn {
  background:
    linear-gradient(115deg, var(--gloss), transparent 46%),
    linear-gradient(135deg, var(--deep-cta-a), var(--deep-cta-b));
  color: var(--on-deep);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), var(--shadow-card);
}
:where(html[data-theme='peacock']) .orb {
  background: linear-gradient(150deg, var(--frost-solid-a), var(--frost-solid-b));
  border: 1px solid var(--rim);
  border-top-color: var(--rim-top);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--shadow-card);
  color: var(--family-ink);
}

/* ---- deep touch -----------------------------------------------------------
   Every interactive glass object answers the hand: a small lift on hover, a
   sink INTO the pane on press. Zero-specificity, so any component that
   already defines its own press (the doors, the float rail) keeps it - these
   rules only fill the gaps. The press itself is near-instant, which is what
   makes it feel mechanical. */
:where(html[data-theme='peacock'])
  :is(.btn, .chip, button.deep, button.deep-cta, button.deep-warm, .orb, a.deep-cta) {
  /* no overshoot in the curve: press-spec pins hover at EXACTLY -1px, and a
     springy bezier sampled mid-flight measured -1.039; a fast ease-out that
     settles inside the check's 200ms wait keeps the feel and the pin */
  transition:
    transform 140ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 140ms ease,
    filter 140ms ease;
}
:where(html[data-theme='peacock']) :is(.btn, .chip):hover {
  transform: translateY(-1px);
}
:where(html[data-theme='peacock'])
  :is(button.deep, button.deep-cta, button.deep-warm, a.deep-cta, .orb):hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    var(--lift-shadow),
    var(--glow-primary);
}
:where(html[data-theme='peacock'])
  :is(.btn, .chip, button.deep, button.deep-cta, button.deep-warm, a.deep-cta, .orb):active {
  transform: translateY(1px) scale(0.975);
  box-shadow: var(--press-well);
  /* the press SNAPS and only the release animates: a tweened press is also a
     sampling race - under full-gate CPU load press-spec caught the hover
     frame 200ms after mousedown when the press carried its own 80ms tween */
  transition-duration: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :where(html[data-theme='peacock'])
    :is(.btn, .chip, button.deep, button.deep-cta, button.deep-warm, a.deep-cta, .orb) {
    transition: none;
  }
}