/* ==========================================================================
   DLT tokens. One file; the site and the desktop client both read it.

   The reference is a mid-century bout record — the printed card from a fight
   programme. Deadlock is ranked combat in a 1950s New York, and a bout card is
   the native document for "here is how this fighter performed." That is where
   the warm ink-on-card ground and the two corner colours come from.
   ========================================================================== */

:root {
  /* ---- ground: darker, so the art behind it can breathe ---------------- */
  --ground:   #12100c;
  --card:     #1a1712;
  --raised:   #241f17;
  --rule:     #2f291f;
  --rule-hi:  #463d2e;

  /* ---- bone: warm paper whites. All clear 4.5:1 on --raised. ----------- */
  --bone:     #efe8da;   /* 13.4:1 */
  --bone-2:   #bcb19c;   /*  7.7:1 */
  --bone-3:   #9a8f7a;   /*  5.1:1 */
  --faint:    #574d3d;   /*  rules and dividers only — never text */

  /* ---- sand, not orange ------------------------------------------------ */
  /* 41% saturation against the old accent's 80%. Sand is desaturated by
     definition; push the chroma up and it stops being sand. */
  --amber:    #cbb083;
  --amber-hi: #e0cba4;
  --amber-dim:#4f4229;
  --on-amber: #14110a;
  --sapphire: #6fa3d6;
  --sapphire-dim: #23374a;

  /* ---- the game's own colours ------------------------------------------
     Taken from the official Photoshop swatches in the Deadlock Graphical
     Library, not sampled by eye. Item categories are data, so they use the
     colours players already read in the shop rather than invented ones.
     Ratios are against --card, the lowest of the three surfaces; every one
     clears 4.5:1 on all three, so they are usable as text as they stand. */
  --weapon:      #dd9642;   /*  7.2:1 */
  --weapon-hi:   #ffd28e;   /* 12.6:1 */
  --vitality:    #7cbb1e;   /*  7.6:1 */
  --vitality-hi: #d3fc97;   /* 15.4:1 */
  --spirit:      #ce91ff;   /*  7.8:1 */
  --spirit-hi:   #e7c9ff;   /* 12.1:1 */
  --soul:        #9affd6;   /* 15.0:1, the soul icon colour */

  /* Crosshair swatches. These are data, not theme: they are the colours the
     game will actually draw, so they are literal and must not be themed. The
     list mirrors crosshair.COLOURS and a test fails if the two drift. */
  --xh-white: rgb(255 255 255);
  --xh-red: rgb(255 0 0);
  --xh-orange: rgb(255 128 0);
  --xh-yellow: rgb(255 255 0);
  --xh-lime: rgb(128 255 0);
  --xh-green: rgb(0 255 0);
  --xh-spring: rgb(0 255 128);
  --xh-cyan: rgb(0 255 255);
  --xh-blue: rgb(0 128 255);
  --xh-violet: rgb(128 0 255);
  --xh-magenta: rgb(255 0 255);
  --xh-black: rgb(0 0 0);
  --xh-outline: #000;
  --soul-dim:    #67ab8f;   /*  6.6:1, the soul text colour */

  /* ---- background art -------------------------------------------------- */
  /* Deadlock's own cityscape and film grain, sourced from the same asset
     bucket as the hero portraits. Held far below the point of distraction:
     measured, a pure-white pixel at --art-sky still leaves secondary text
     above 4.5:1 on the ground. */
  --art-sky:   .07;
  --art-grain: .035;

  /* ---- outcome --------------------------------------------------------- */
  /* Never carried by colour alone; the W/L glyph is the cue. */
  --won:      #8fb56a;
  --won-bg:   #1f2717;
  --lost:     #d46f5c;
  --lost-bg:  #2e1c16;

  /* ---- type: two families, clearly distinct ---------------------------- */
  /* Display is an active element at large sizes — the rating, a player's name.
     It is never a label. Mono survives in exactly one place: the ingest token,
     where telling 0 from O actually matters. */
  --display: "Big Shoulders", "Archivo", system-ui, sans-serif;
  --sans:    "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "Plex Mono", ui-monospace, Menlo, monospace;

  --fs-fine:  12px;
  --fs-small: 13px;
  --fs-body:  15px;
  --fs-lead:  17px;
  --fs-head:  22px;
  --fs-name:  clamp(34px, 6vw, 54px);
  --fs-hero:  clamp(52px, 8vw, 88px);   /* the rating, and nothing else */
  --fs-stat:  clamp(21px, 2.6vw, 27px);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 36px; --sp-7: 56px; --sp-8: 88px;

  /* Three radii, no more. Mixed 2/3/5px values across components read as
     sloppy rather than as a system. */
  --r-sm:   2px;    /* portraits, tiles, anything small and square-ish */
  --r-md:   4px;    /* inputs, buttons, cards, panels */
  --r-pill: 999px;

  /* Depth is carried by shadow tokens so components never hardcode a colour. */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .30);
  --shadow-2: 0 3px 10px rgb(0 0 0 / .34);
  --shadow-in: inset 0 1px 2px rgb(0 0 0 / .32);

  /* A vignette on bordered panels. Kept deliberately weak: it is there to stop
     a flat fill reading as a hole in the page, not to be noticed. The whole
     shadow is the token, not just its colour, so nothing in dlt.css has to
     name a colour to use it. */
  --vignette: inset 0 0 34px rgb(0 0 0 / .26);

  /* Height of the sticky site header. Anything else that sticks to the top has
     to clear it, or it slides underneath an opaque bar and disappears at the
     exact moment it is supposed to be pinned. One value so the three things
     that need it cannot disagree; it was three different guesses before. */
  --header-h: 72px;

  --measure: 1120px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: .12s;

  /* Chromium 85 runs the Steam overlay browser and predates color-mix().
     These shadow the values above and must be edited alongside them. */
  --card-92:  rgba(26, 23, 18, .92);
  --amber-06: rgba(203, 176, 131, .06);
  --amber-10: rgba(203, 176, 131, .10);
  --scrim:    rgba(8, 6, 3, .74);

  --titlebar-h: 36px;
}

/* --------------------------------------------------------------------------
   Alternates. Each overrides ground, bone and corners only — never size,
   spacing or type — so a swap cannot move the layout. Preview with ?theme=.
   -------------------------------------------------------------------------- */

[data-theme="brass"] {
  --ground:   #0e0f0c;
  --card:     #141610;
  --raised:   #1b1e16;
  --rule:     #272c20;
  --rule-hi:  #3b4232;
  --bone:     #e9e6dc;
  --bone-2:   #a8a598;
  --bone-3:   #8a8778;
  --faint:    #4a4943;
  --amber:    #c9a227;
  --amber-hi: #e8c04a;
  --amber-dim:#5c4c16;
  --on-amber: #100f06;
  --card-92:  rgba(20, 22, 16, .92);
  --amber-06: rgba(201, 162, 39, .06);
  --amber-10: rgba(201, 162, 39, .10);
}

[data-theme="sapphire"] {
  --ground:   #0b0e13;
  --card:     #11151c;
  --raised:   #171d26;
  --rule:     #222b38;
  --rule-hi:  #364354;
  --bone:     #e3e8ee;
  --bone-2:   #a3adba;
  --bone-3:   #838e9c;
  --faint:    #454e59;
  --amber:    #6fa3d6;
  --amber-hi: #9cc2e8;
  --amber-dim:#24384f;
  --on-amber: #05080c;
  --sapphire: #e5951a;
  --card-92:  rgba(17, 21, 28, .92);
  --amber-06: rgba(111, 163, 214, .06);
  --amber-10: rgba(111, 163, 214, .10);
}