/* The light version, as one file laid over the dark one.
 *
 * Nothing in product.css is touched. The site that works keeps working, and
 * this is a second stylesheet the preview build links after it -- so the two
 * can be compared honestly, and abandoning this costs deleting one file.
 *
 * Almost all of it is the token block redefined. That the whole ground can be
 * turned over by rewriting sixteen variables is the argument for having put
 * them in one place, and the reason a second theme is an evening's work rather
 * than a rewrite.
 *
 * What is NOT flipped: the product sections that frame application
 * screenshots. Those windows are dark themselves, and a white card around a
 * dark screenshot reads as a hole punched in the page. They keep their own
 * colours, which is why they had their own colours to begin with.
 */

:root {
  /* Warm off-white rather than #fff: a pure white page glares under a lamp,
     and every screenshot on the site is on a dark ground, so a hard white
     makes each one look like a cut-out. */
  --bg: #f1f1ed;
  --surface: #f8f8f5;
  --surface-raised: #fffffe;

  /* Near-black with a little blue, not #000. Pure black on warm grey is a
     harder edge than paper ever makes, and reads as a placeholder. */
  --ink: #14161a;
  --muted: #55565b;
  --faint: #86878c;

  --line: rgba(20, 22, 26, 0.16);
  --line-soft: rgba(20, 22, 26, 0.075);
  --row-line: rgba(20, 22, 26, 0.11);

  /* 5.9:1 on the page ground. The dark theme could afford a light grey for
     small type; on this one the same lightness would fall under 4.5 and the
     data plates are the smallest text on the site. */
  --micro-ink: #5c5d62;

  /* The lime is a dark-theme colour: on #f1f1ed it measures 1.4:1 and is
     unreadable as text. This is the same hue taken down until it carries
     words -- 4.7:1 -- and the soft form stays a wash behind them. */
  --accent: #4a7a12;
  --accent-soft: rgba(74, 122, 18, 0.11);
}

/* The grid, kept exactly as it was and only turned over: the same 12 columns
   at the same weight, drawn dark on light instead of light on dark. It has to
   stay this faint. A visible grid stops being structure and becomes pattern. */
.sheet-guides {
  background: repeating-linear-gradient(90deg,
    rgba(20, 22, 26, 0.055) 0 1px, transparent 1px calc(100% / 12));
}

body {
  background:
    linear-gradient(rgba(20, 22, 26, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 26, 0.032) 1px, transparent 1px);
}

/* The header sits over the page and needs to stay legible while whatever is
   under it scrolls past. Same trick as the dark one, opposite colour. */
.site-header { background: rgba(248, 248, 245, 0.92); }

/* Panels that were near-black boxes on a black page. */
.ai-panel { background: var(--surface); }

/* The state tags. Every one of them was picked to sit on near-black: the
   green measures 1.9:1 on this ground, the amber 1.8:1, the red 2.4:1. Same
   hues, walked down until each carries words at 4.5:1 -- these labels say
   what a tool does to your disk, and a label you have to squint at is worse
   than no label. */
.tag--read, .tag--free { color: #1d7a4f; }
.tag--write { color: #876835; }
.tag--erase { color: #9e5b5c; }

/* The mark's glow was white light thrown onto a black ground. On this one it
   would be a pale smear, so the sphere gets a shadow instead -- the same job
   done the way a light page does it. */
.mark-sphere {
  filter: drop-shadow(0 0.15rem 0.5rem rgba(20, 22, 26, 0.22));
}

/* The veil exists to keep the headline readable where the mark slides behind
   it. It follows --bg, so it turns over on its own -- but on a light ground
   the mark is dark and the type is dark, so it has to be stronger. */
.sheet-veil {
  background: linear-gradient(90deg,
    var(--bg) 0%, var(--bg) 58%, rgba(241, 241, 237, 0) 86%);
}

@media (max-width: 760px) {
  .sheet-veil { display: none; }
}

/* Buttons were light-on-dark. Inverted, they need the border to carry the
   shape rather than the fill. */
.btn-primary,
.button {
  border-color: rgba(20, 22, 26, 0.22);
}

/* The construction gate is drawn in its own colours, on purpose: it is a
   curtain in front of everything and should not look like part of the page.
   It stays dark, and the yellow triangle stays where the eye goes. */

/* The product colour, on a light ground.
 *
 * Measured before writing this: on #f1f1ed the six product colours land
 * between 1.5:1 and 3.5:1 -- every one of them fails as text. They were
 * chosen to glow on black, and nothing about picking a light background
 * changes what they are.
 *
 * So the colour still answers "which product is this?", but by another route:
 * the wash gets stronger and the fillet gets wider, and the name stays ink.
 * A pale gold name on cream is not a colour cue, it is a name you cannot read.
 *
 * And it has to answer that question WITHOUT a mouse. The dark theme shows
 * the hue at rest through the code number, which is the product colour
 * permanently; here that number had to go back to ink to stay readable, and
 * the hue went with it -- leaving a catalogue that was six identical grey
 * rows until you pointed at one. So the fillet takes the job over: it stands
 * full height at rest, wide enough to name the colour from, the way it
 * already does on phones. Hover then makes it GROW rather than APPEAR, which
 * is the difference between a row lighting up and a row arriving.
 */
.row::before {
  width: 4px;
  height: 100%;
}

/* A wash at rest as well, but a short one: it stops under the code number
   instead of running across the row, so it reads as tinted paper at the edge
   rather than as a row already selected. Hover is what pushes it across. */
.row {
  background: linear-gradient(90deg, var(--product-glow) 0%, transparent 22%);
}

@media (hover: hover) {
  .row:hover,
  .row:focus-within {
    background: linear-gradient(90deg,
      var(--product-glow) 0%, transparent 70%);
  }

  .row:hover::before,
  .row:focus-within::before { width: 7px; }

  /* The wash slides out instead of snapping on. Without this the fillet
     grows over 140ms while the ground changes instantly, and the two moving
     at different speeds is what makes a hover feel cheap. */
  .row { transition: background 180ms ease; }

  /* Deliberately overriding the dark theme's colour-the-name rule. */
  .row:hover .row-name a,
  .row:focus-within .row-name a { color: var(--ink); }

  /* The arrow is a glyph, not a word: at that size and weight the colour
     reads as a tint rather than as text, and it is the one place the hue
     itself gets to show. */
  .row:hover .row-arrow,
  .row:focus-within .row-arrow { color: var(--product-color); }

  .row:hover .row-marca,
  .row:focus-within .row-marca { opacity: 0.5; }
}

/* The code number is the product colour permanently, in both themes. On this
   one it needs help: it is 12px mono, the smallest coloured thing on the page. */
.row-code {
  color: var(--ink);
  opacity: 0.72;
}

.row:hover .row-code,
.row:focus-within .row-code { color: var(--ink); opacity: 1; }