/* ═══════════════════════════════════════════════════════════════════════════
   THE PETROVA LOG — DESIGN TOKENS

   The single source of truth for colour. Nothing else in this project should
   contain a colour literal; if you find one, it is a bug, and it is how blue
   from the app this was forked from survived three rounds of retheming.

   Load this BEFORE styles.css.

   ── The rules ──────────────────────────────────────────────────────────────
   1. Ryland is green. All of him. Every surface, edge, glow and envelope.
   2. Rocky is brown through gold. All of him. Never blue, never navy.
   3. The sky is a very dark forest green, near black.
   4. The accent is the Petrova line: red. Never blue.
   5. Anything that is neither person and needs emphasis is red or near-black.

   ── How per-person colour works ────────────────────────────────────────────
   Components never name a person. They read --user-*, and the block at the
   bottom of this file points those at the signed-in person's ramp via
   body[data-user]. Per-letter surfaces use [data-sender] the same way, so an
   archive can show both people's envelopes side by side without either one
   fighting over a shared variable.

   Adding a third person would mean adding one ramp and one mapping block
   here, and touching nothing else.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── the sky ──────────────────────────────────────────────────────────────
     Dark forest green, not navy. Kept near black so the wax seals and the
     gold engraving carry the colour rather than competing with the ground. */
  --space-0:      #050806;   /* deepest — page base */
  --space-1:      #0a0f0b;   /* panels, cards */
  --space-2:      #101710;   /* raised surfaces */
  --space-3:      #18211a;   /* hover, borders */
  --space-nav:    #070b08;
  --space-0-rgb:   5   8   6;
  --space-1-rgb:  10  15  11;
  --space-2-rgb:  16  23  16;

  /* ── astrophage ───────────────────────────────────────────────────────────
     The red the hero photo is washed with on the login screen. Its own token
     because it is a scene colour, not the Petrova accent, and the two want to
     be tuned independently. */
  --astrophage:     #c62a20;
  --astrophage-rgb: 198  42  32;

  /* ── the Petrova line ─────────────────────────────────────────────────────
     The one non-person accent. It is red because the line is red. */
  --petrova:      #d65c48;
  --petrova-deep: #8f3325;
  --petrova-glow: rgba(214, 92, 72, .55);
  --petrova-rgb: 214  92  72;

  /* ── Ryland · Earth · deep blue ───────────────────────────────────────── */
  --ryland:       #2f4f7d;
  --ryland-deep:  #101e33;
  --ryland-mid:   #1b3050;
  --ryland-lt:    #6d92c4;
  --ryland-glow:  rgba(109, 146, 196, .45);
  --ryland-hot:   #8fb4e8;   /* what Ryland glows */
  --ryland-hot-rgb: 143 180 232;
  --ryland-foot:  #050b16;
  /* His night: blue-black. */
  --ryland-space-0: #05070c;  --ryland-space-0-rgb:  5  7 12;
  --ryland-space-1: #090d14;  --ryland-space-1-rgb:  9 13 20;
  --ryland-space-2: #0f151f;  --ryland-space-2-rgb: 15 21 31;
  /* Envelope, face by face. Taken from dev-tools/envelope-color-picker in the
     private app — the faces sit close together and the border is much darker,
     which is what makes a folded shape read. */
  --ryland-env-flap:   #849de1;
  --ryland-env-border: #323f67;
  --ryland-env-left:   #6376b0;
  --ryland-env-right:  #6377b0;
  --ryland-env-bottom: #495c92;
  --ryland-env-base:   #596ea6;
  --ryland-env-seal:   #0b1021;
  --ryland-env-rim:    #070c1d;
  --ryland-space-3: #172030;
  --ryland-texture: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2770%27%20height%3D%2736%27%20viewBox%3D%270%200%2070%2036%27%3E%3Cpath%20d%3D%27M0%209%20C%2017.5%204%2017.5%204%2035%209%20C%2052.5%2014%2052.5%2014%2070%209%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.045%29%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M0%2020%20C%2017.5%2025%2017.5%2025%2035%2020%20C%2052.5%2015%2052.5%2015%2070%2020%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.035%29%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M0%2030%20C%2017.5%2027%2017.5%2027%2035%2030%20C%2052.5%2033%2052.5%2033%2070%2030%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.03%29%27%20stroke-width%3D%27.8%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  --ryland-rgb:  47  79 125;

  /* ── Rocky · Erid · brown through gold ────────────────────────────────── */
  --rocky:        #7d4522;
  --rocky-deep:   #2c1608;
  --rocky-mid:    #4a2711;
  --rocky-lt:     #d9a441;   /* gold — his accent, and his headings */
  --rocky-gold:   #d9a441;
  --rocky-glow:   rgba(192, 138, 78, .45);
  --rocky-hot:    #e8a03c;   /* Rocky glows amber, not gold — warmer reads hotter */
  --rocky-hot-rgb: 232 160  60;
  --rocky-foot:   #1b1104;
  /* His night: brown-black through to gold. The sky was green for both, which
     is why his whole page still read forest even once every component had been
     rewired — the ground underneath them had not moved. */
  --rocky-space-0: #090603;  --rocky-space-0-rgb:  9  6  3;
  --rocky-space-1: #110b05;  --rocky-space-1-rgb: 17 11  5;
  --rocky-space-2: #1a1108;  --rocky-space-2-rgb: 26 17  8;
  /* Envelope, face by face. Taken from dev-tools/envelope-color-picker in the
     private app — the faces sit close together and the border is much darker,
     which is what makes a folded shape read. */
  --rocky-env-flap:   #dfb695;
  --rocky-env-border: #542d0d;
  --rocky-env-left:   #b28662;
  --rocky-env-right:  #b28662;
  --rocky-env-bottom: #976944;
  --rocky-env-base:   #9c714f;
  --rocky-env-seal:   #401c03;
  --rocky-env-rim:    #280f01;
  --rocky-space-3: #26190c;
  /* Strata, not ripples. Erid is a rock; the wave tile was Orion's ocean. */
  --rocky-texture: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2772%27%20height%3D%2738%27%20viewBox%3D%270%200%2072%2038%27%3E%3Cpath%20d%3D%27M0%207%20L14%205%20L31%209%20L48%204%20L62%208%20L72%206%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.05%29%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M0%2018%20L11%2021%20L27%2016%20L43%2020%20L58%2015%20L72%2019%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.038%29%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M0%2029%20L16%2027%20L30%2031%20L47%2026%20L60%2030%20L72%2028%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.032%29%27%20stroke-width%3D%27.85%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M20%205%20L22%2018%20M52%204%20L50%2015%27%20stroke%3D%27rgba%28255%2C255%2C255%2C.028%29%27%20stroke-width%3D%27.7%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  --rocky-rgb:  125  69  34;

  /* ── paper and ink ────────────────────────────────────────────────────────
     Letters are read on warm paper. The ruled lines used to be blue; they are
     now a warm grey-brown, which is what ruled paper actually looks like. */
  --paper:        #f2ead6;
  --paper-mid:    #e8dcc0;
  --paper-edge:   #c8b898;
  --paper-line:   rgba(120, 100, 70, .12);
  --ink:          #241f18;
  --ink-soft:     #5c5245;
  --ink-faint:    #8a7f6d;

  /* ── metal ────────────────────────────────────────────────────────────── */
  --gold:         #c4a882;
  --gold-lt:      #d9c49a;
  --gold-deep:    #8a6f45;
  --gold-rgb:   196 168 130;

  /* ── stars ────────────────────────────────────────────────────────────────
     Warm white, very slightly green, so they belong to this sky. */
  --star:         #ece8e0;
  --star-rgb:   236 232 224;
  --star-dim:     rgba(236, 232, 224, .45);

  /* ── seal, when no particular person owns it ──────────────────────────── */
  --seal:         var(--petrova-deep);
  --seal-rim:     #451f0c;
  --env-border:   #7a4c28;

  /* ── state ────────────────────────────────────────────────────────────── */
  --danger:       #c4443a;
  --ok:           var(--ryland-lt);

  --radius: 2px;

  /* ── the generic per-person channel ───────────────────────────────────────
     Defaults to Ryland so an un-themed render is still coherent rather than
     falling back to a browser blue. */
  --user:       var(--ryland);
  --user-deep:  var(--ryland-deep);
  --user-mid:   var(--ryland-mid);
  --user-lt:    var(--ryland-lt);
  --user-glow:  var(--ryland-glow);
  --user-rgb:   var(--ryland-rgb);
  --env-flap: var(--ryland-env-flap);
  --env-border: var(--ryland-env-border);
  --env-left: var(--ryland-env-left);
  --env-right: var(--ryland-env-right);
  --env-bottom: var(--ryland-env-bottom);
  --env-base: var(--ryland-env-base);
  --env-seal: var(--ryland-env-seal);
  --env-rim: var(--ryland-env-rim);
  --user-hot:   var(--ryland-hot);
  --user-hot-rgb: var(--ryland-hot-rgb);
  --user-foot:  var(--ryland-foot);
  --ripple-tile: var(--ryland-texture);
  --space-0: var(--ryland-space-0);  --space-0-rgb: var(--ryland-space-0-rgb);
  --space-1: var(--ryland-space-1);  --space-1-rgb: var(--ryland-space-1-rgb);
  --space-2: var(--ryland-space-2);  --space-2-rgb: var(--ryland-space-2-rgb);
  --space-3: var(--ryland-space-3);
  --user-foot: var(--ryland-foot);
  --ripple-tile: var(--ryland-texture);
  --space-0: var(--ryland-space-0);  --space-0-rgb: var(--ryland-space-0-rgb);
  --space-1: var(--ryland-space-1);  --space-1-rgb: var(--ryland-space-1-rgb);
  --space-2: var(--ryland-space-2);  --space-2-rgb: var(--ryland-space-2-rgb);
  --space-3: var(--ryland-space-3);

  /* No aliases here, deliberately.
     `--ocean-lt: var(--user-lt)` used to live at :root, and a custom property
     that references another resolves where it is DECLARED — so it froze to
     whatever --user-lt was at :root (the default person) and descendants
     inherited that computed value, never seeing body[data-user]'s override.
     Section headings stayed green on Rocky's page for exactly this reason,
     while passing the linter, because they were using a token — the wrong one.
     The old names are substituted away in styles.css instead. */
}

/* The login screen belongs to neither person, so it locks the accent to gold
   rather than inheriting whoever signed in last. */
#screen-login {
  --user:      var(--gold-deep);
  --user-deep: var(--space-1);
  --user-mid:  var(--space-2);
  --user-lt:   var(--gold);
  --user-glow: rgba(196, 168, 130, .4);
  --user-rgb:  var(--gold-rgb);
  --user-hot:  var(--gold-lt);
  --user-hot-rgb: var(--gold-rgb);
  --user-foot: var(--space-0);
}

/* ── who is signed in ─────────────────────────────────────────────────────── */

body[data-user="ryland"] {
  --user:      var(--ryland);
  --user-deep: var(--ryland-deep);
  --user-mid:  var(--ryland-mid);
  --user-lt:   var(--ryland-lt);
  --user-glow: var(--ryland-glow);
  --user-rgb:  var(--ryland-rgb);
  --user-hot:  var(--ryland-hot);
  --user-hot-rgb: var(--ryland-hot-rgb);
  --user-foot: var(--ryland-foot);
  --ripple-tile: var(--ryland-texture);
  --space-0: var(--ryland-space-0);  --space-0-rgb: var(--ryland-space-0-rgb);
  --space-1: var(--ryland-space-1);  --space-1-rgb: var(--ryland-space-1-rgb);
  --space-2: var(--ryland-space-2);  --space-2-rgb: var(--ryland-space-2-rgb);
  --space-3: var(--ryland-space-3);
  --env-flap: var(--ryland-env-flap);
  --env-border: var(--ryland-env-border);
  --env-left: var(--ryland-env-left);
  --env-right: var(--ryland-env-right);
  --env-bottom: var(--ryland-env-bottom);
  --env-base: var(--ryland-env-base);
  --env-seal: var(--ryland-env-seal);
  --env-rim: var(--ryland-env-rim);
}

body[data-user="rocky"] {
  --user:      var(--rocky);
  --user-deep: var(--rocky-deep);
  --user-mid:  var(--rocky-mid);
  --user-lt:   var(--rocky-lt);
  --user-glow: var(--rocky-glow);
  --user-rgb:  var(--rocky-rgb);
  --user-hot:  var(--rocky-hot);
  --user-hot-rgb: var(--rocky-hot-rgb);
  --user-foot: var(--rocky-foot);
  --ripple-tile: var(--rocky-texture);
  --space-0: var(--rocky-space-0);  --space-0-rgb: var(--rocky-space-0-rgb);
  --space-1: var(--rocky-space-1);  --space-1-rgb: var(--rocky-space-1-rgb);
  --space-2: var(--rocky-space-2);  --space-2-rgb: var(--rocky-space-2-rgb);
  --space-3: var(--rocky-space-3);
  --env-flap: var(--rocky-env-flap);
  --env-border: var(--rocky-env-border);
  --env-left: var(--rocky-env-left);
  --env-right: var(--rocky-env-right);
  --env-bottom: var(--rocky-env-bottom);
  --env-base: var(--rocky-env-base);
  --env-seal: var(--rocky-env-seal);
  --env-rim: var(--rocky-env-rim);
}

/* ── who wrote a given letter ─────────────────────────────────────────────────
   Scoped by author rather than by viewer, so both people's envelopes can sit
   on the same screen in their own colours.

   These carry the FULL ramp, ground included — not just the accents. The
   transition cover is marked with data-sender and painted before anyone is
   signed in, so a partial ramp left it falling back to :root's default person
   and arriving green under a brown seal. If a surface can appear before
   body[data-user] exists, it needs everything. */

[data-sender="ryland"], .is-ryland {
  --user:      var(--ryland);
  --user-deep: var(--ryland-deep);
  --user-mid:  var(--ryland-mid);
  --user-lt:   var(--ryland-lt);
  --user-glow: var(--ryland-glow);
  --user-rgb:  var(--ryland-rgb);
  --user-hot:  var(--ryland-hot);
  --user-hot-rgb: var(--ryland-hot-rgb);
  --user-foot: var(--ryland-foot);
  --ripple-tile: var(--ryland-texture);
  --space-0: var(--ryland-space-0);  --space-0-rgb: var(--ryland-space-0-rgb);
  --space-1: var(--ryland-space-1);  --space-1-rgb: var(--ryland-space-1-rgb);
  --space-2: var(--ryland-space-2);  --space-2-rgb: var(--ryland-space-2-rgb);
  --space-3: var(--ryland-space-3);
  --env-flap: var(--ryland-env-flap);
  --env-border: var(--ryland-env-border);
  --env-left: var(--ryland-env-left);
  --env-right: var(--ryland-env-right);
  --env-bottom: var(--ryland-env-bottom);
  --env-base: var(--ryland-env-base);
  --env-seal: var(--ryland-env-seal);
  --env-rim: var(--ryland-env-rim);
}

[data-sender="rocky"], .is-rocky {
  --user:      var(--rocky);
  --user-deep: var(--rocky-deep);
  --user-mid:  var(--rocky-mid);
  --user-lt:   var(--rocky-lt);
  --user-glow: var(--rocky-glow);
  --user-rgb:  var(--rocky-rgb);
  --user-hot:  var(--rocky-hot);
  --user-hot-rgb: var(--rocky-hot-rgb);
  --user-foot: var(--rocky-foot);
  --ripple-tile: var(--rocky-texture);
  --space-0: var(--rocky-space-0);  --space-0-rgb: var(--rocky-space-0-rgb);
  --space-1: var(--rocky-space-1);  --space-1-rgb: var(--rocky-space-1-rgb);
  --space-2: var(--rocky-space-2);  --space-2-rgb: var(--rocky-space-2-rgb);
  --space-3: var(--rocky-space-3);
  --env-flap: var(--rocky-env-flap);
  --env-border: var(--rocky-env-border);
  --env-left: var(--rocky-env-left);
  --env-right: var(--rocky-env-right);
  --env-bottom: var(--rocky-env-bottom);
  --env-base: var(--rocky-env-base);
  --env-seal: var(--rocky-env-seal);
  --env-rim: var(--rocky-env-rim);
}