/* ============================================================================
   ADORE OS · the design

   The single place any of this is decided. Every screen loads this file and
   declares nothing of its own, so changing the look is one edit here and one
   deploy, and no screen can drift because there is nowhere for it to drift to.

   THE ONE RULE: if you are about to write a hex value in a screen, stop. It
   belongs here with a name, or it is a mistake. A raw colour in a screen is
   invisible to a redesign and will still be slate grey in a year.

   ---------------------------------------------------------------------------
   Quiet luxury is dark AND unmistakably purple, which sounds like a
   contradiction and is not: the two moves are on different axes.

   Lightness stays very low and the steps between surfaces stay small, so
   nothing on screen competes and the room feels still. The identity comes
   from CHROMA at that darkness: a near-black that is genuinely violet rather
   than a grey with a rumour of purple in it.

   When the purple is not reading, add chroma. Never lightness. Lifting the
   panels until you can see it is exactly how a brand starts shouting.
   ========================================================================= */

:root{
  /* ---- the room -------------------------------------------------------- */
  --bg:#080310;            /* the room itself */
  --panel:#110819;         /* a card sitting in it */
  --panel-2:#180D24;       /* something raised on the card */
  --line:#2A1940;
  --line-soft:#1F1230;
  --header:#1E1136;        /* the one place the brand is allowed to be loud */

  /* ---- text ------------------------------------------------------------
     There is no grey in this system. White on dark is comfortable; grey on
     dark is not, and a light purple on a purple ground is worse than either.

     So hierarchy is built from LESS WHITE, never from a darker colour. Every
     level is the same white at a different strength, which reads as the same
     ink further away rather than as a second, muddier colour. It also means
     the ink can never introduce a hue that fights the ground: white at any
     strength composites to a tint of whatever is underneath it, so it always
     belongs.

     And the levels stop early on purpose. Dropping a label to 50 per cent to
     say "this is less important" is the move that produces the grey nobody
     can stand looking at, and it is unnecessary: a label is already smaller,
     already uppercase, already letter-spaced. It does not need to be dim as
     well. Hierarchy below the second level is SIZE AND WEIGHT, not colour.

     Only --ink-4 is genuinely faint, and nothing that has to be read ever
     uses it: rules, disabled controls, a struck-through day in a calendar.

     The white carries a hair of warmth. A clinical white on aubergine reads
     as a spreadsheet; this one reads as paper under a warm light, and at
     these strengths the difference is felt rather than seen. ------------ */
  --ink:#FFFCFA;                        /* what you actually read */
  --ink-2:rgba(255,252,250,.80);        /* what you read second */
  --ink-3:rgba(255,252,250,.70);        /* small print, still comfortably read */
  --ink-4:rgba(255,252,250,.32);        /* rules and disabled. Never text. */

  /* ---- the metal -------------------------------------------------------
     One metal, on at most three things per screen: the mark, the single
     action that matters, and whatever we are trying to sell. A gold on a
     fourth element is a gold that has stopped meaning anything. --------- */
  --accent:#C9A227;
  --gold-lit:#E8CE79;      /* gold as text; the solid goes muddy under 15px */

  /* Every structural label in the system: section headings, the eyebrow over
     a block, column headers, the caption on a field.

     These were white at low strength and they were the grey Guy kept seeing
     and disliking, over and over, because that is what dimmed white IS. The
     fix is not another point of opacity. In a system made of one dark hue and
     one metal, the METAL carries the structure: it is warm, it is on brand,
     it reads instantly as "this is a label and not a sentence", and there is
     no grey left anywhere on the screen. */
  --label:rgba(226,199,132,.78);
  --gold-dim:#241A09;
  --gold-line:#6B5518;

  /* ---- meaning ---------------------------------------------------------
     These are not chosen for beauty. Green has to read as green across a
     room in the diary and red has to stop somebody. Desaturated to live on
     aubergine, never picked for how they sit next to it. ---------------- */
  --ok:#4ED09A;   --ok-dim:#0E2E22;   --ok-line:#2A7C58;
  /* Attention is a second METAL, not a second hue. Orange on aubergine is
     the one pairing that cannot be rescued: it sits opposite the ground and
     reads as plastic however far it is desaturated. Bronze is warm enough to
     mean "look at this", belongs to the same family as the gold, and the two
     of them together are the oldest luxury pairing there is. */
  --hot:#BE8352;  --hot-dim:#2A1A0F;  --hot-line:#6B4526;
  --bad:#E56478;  --bad-dim:#301522;  --bad-line:#87344A;

  /* ---- surfaces that are neither panel nor line ------------------------ */
  --pressed:#2C1B44;       /* a control that is currently chosen */
  --hover-line:#3E2A58;    /* a border under the cursor */
  --focus-line:#4A2E6B;    /* a border with the caret in it */
  --sunk:#0A0513;          /* inset: keycaps, tracks, wells */
  --cool:#B49AE0;          /* the one non-brand accent: wrap-up, information */

  /* ---- text that sits ON a colour -------------------------------------
     A tint is not a text colour. These are the ones that stay readable on
     their own dim ground, and they were the most-copied raw hexes in the
     system before this file existed. ------------------------------------ */
  --on-gold:#1A1405;       /* type on a gold surface */
  --ok-text:#D6F5E4;
  --hot-text:#E4BE94;
  --bad-text:#F2AFBA;

  /* ---- the one gold gradient ------------------------------------------
     Save and next, Confirm, the primary of any screen. Nothing else.

     Four stops rather than two. A metal is not a flat colour with a slope on
     it: light catches the top edge, the body is deeper than either end, and
     there is a lift again at the very bottom where the surface turns away.
     Two stops read as plastic no matter which two you pick. ------------- */
  --gold-a:#F0D89A;        /* the lit top edge */
  --gold-b:#D9B443;        /* the face */
  --gold-c:#B48C1E;        /* the body, deeper than either end */
  --gold-d:#C79E2C;        /* the turn at the foot */

  /* ---- two more surfaces, because three were never enough ------------- */
  --raised-2:#251739;      /* a thing raised on a thing that is already raised */
  --well:#1E1231;          /* an inset field or track */

  /* ---- the occupancy ramp ---------------------------------------------
     Capacity's five steps. It is a data scale rather than brand, but it is
     still colour, so it still lives here: there is one file, or there is no
     single source. Empty and full shout, the middle recedes on purpose. -- */
  --h0:#E8523F;  /* almost empty, and that costs money */
  --h1:#C25A44;
  --h2:#6D6484;  /* fine. nothing to look at */
  --h3:#4FA87A;
  --h4:#33CD80;  /* full */

  /* ---- the door -------------------------------------------------------
     The entrance animation is the one piece of pure art in the system, and
     even it declares nothing of its own. ------------------------------- */
  --door-deep:#2A1436;
  --door-warm:#D9736A;

  --radius:10px;
}

/* ============================================================================
   THE SHEEN

   One pass of light across a surface when the cursor arrives, and never
   again while it stays. A loop is a toy; a single pass is the light moving
   because you did, which is what a real metal or a lacquered surface does.

   Anything that wants it says class="lit". It costs nothing when unused.
   ========================================================================= */
.lit{position:relative;overflow:hidden;isolation:isolate}
.lit::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,.16) 45%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.16) 55%,
    transparent 70%);
  transform:translateX(-120%);
}
.lit:hover::after{ animation:sheen .62s cubic-bezier(.22,.61,.36,1) 1 }
@keyframes sheen{ to{ transform:translateX(120%) } }
/* on gold the light is warmer, because white over gold reads as a smear */
.lit.on-gold::after{
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,246,214,.34) 46%,
    rgba(255,252,238,.62) 50%,
    rgba(255,246,214,.34) 54%,
    transparent 70%);
}
@media (prefers-reduced-motion:reduce){ .lit:hover::after{animation:none} }

/* ============================================================================
   THE SCROLL RAIL

   A column that scrolls should say so. Two hairline arrows, one at each end,
   each of which fades out when there is nothing left that way. Put class
   "scrolls" on the scrolling element and Adore.rails() does the rest.

   Not "rail": the dialer already owns that name for the script navigation,
   and a shared stylesheet that takes a name a screen is already using turns
   three columns into three flex rows. A global class needs a name nothing
   local would ever choose.
   ========================================================================= */
.scrollcap{position:absolute;inset-inline:0;height:34px;pointer-events:none;z-index:6;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s}
.scrollcap.on{opacity:1}
.scrollcap.up{top:0;background:linear-gradient(180deg,var(--bg),transparent)}
.scrollcap.down{bottom:0;background:linear-gradient(0deg,var(--bg),transparent)}
.scrollcap svg{width:15px;height:15px;fill:var(--label);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}