/* ============================================================
   LÍO UNIVERSE · SHARED IDENTITY TOKENS
   ------------------------------------------------------------
   Everything in the universe starts from this file. A new world
   inherits all of it for free and only overrides --world-* on its
   own container when it wants its own mood.

   Rule of thumb: if two worlds should agree on it, it lives here.
   If it belongs to one world only, it goes in that world's record.
   ============================================================ */

:root {
  /* Dark is the only scheme. Declaring it stops the browser from
     painting scrollbars and native controls in light. */
  color-scheme: dark;

  /* ---- base palette (the sky everything hangs in) ---- */
  --night:        #150E2E;
  --night-soft:   #221548;
  --night-deep:   #0E0824;
  --night-black:  #0A0518;
  --night-halo:   #35205F;   /* the bloom behind the logo */
  --night-drop:   #0C0720;   /* the colour the cartridge shadow falls in */

  /* ---- the three signal colours ---- */
  --magenta:      #FF3D8B;   /* do this / play this */
  --cyan:         #3DE0E5;   /* go here / it worked */
  --gold:         #FFC53D;   /* something was won */

  /* Their deep edges. These used to be loose hex codes in
     estilo.css; they are derivations, so they live here. */
  --magenta-deep: #B31D5C;
  --cyan-deep:    #1E9BA0;

  /* Ink that goes ON a signal colour. */
  --ink-magenta:  #1A0A18;
  --ink-cyan:     #04262A;
  --ink-gold:     #2A1656;

  /* ---- ink ----
     --grey and --lilac-dim were raised: at their old values
     (#7A68A8 → 3.86:1, #8C79C4 → 4.45:1 on a card) the whole
     metadata layer of the site failed WCAG AA at 11.5–13px.
     The hue is unchanged; only the lightness moved. */
  --paper:        #F3ECFF;   /* 16.1:1 on --night */
  --paper-soft:   #CDBEF0;   /* the journal voice */
  --lilac:        #B9A8E8;   /*  8.7:1 */
  --lilac-dim:    #9C8AD0;   /*  6.1:1  (was #8C79C4) */
  --grey:         #9A88C8;   /*  5.9:1  (was #7A68A8 — failed AA) */

  /* ---- edges ----
     Two of them, and the difference matters:
     --edge        structure you are meant to feel, not read
     --edge-bright the OUTLINE OF A CONTROL. .chip and .btn.fantasma
                   have no fill and no shadow, so this border is the
                   only thing saying "this is a button". It has to
                   clear 3:1 (WCAG 1.4.11) on every dark surface.
                   #7A5ECA → 3.78 on night, 3.37 on soft, 3.04 on
                   the raised surface. The old #4B3585 was 1.89. */
  --edge:         #4A3480;
  --edge-bright:  #7A5ECA;
  --edge-soft:    #2E1F55;

  /* ---- raised surfaces (level pickers, touch pads) ---- */
  --surface:      #2B1B5A;
  --surface-press:#3D2478;

  /* ---- type ----
     Fredoka is the round, fat letter the logo is drawn in; Nunito
     is its calm twin for reading. Both fall back to faces that are
     already on the machine, so a dead connection only costs the
     shape, never the layout. */
  --face-display: "Fredoka", "Arial Rounded MT Bold", Impact, "Arial Black", sans-serif;
  --face-text:    "Nunito", "Trebuchet MS", Verdana, sans-serif;

  --size-huge:    clamp(32px, 6.4vw, 54px);
  --size-title:   clamp(23px, 3.6vw, 32px);
  --size-lead:    clamp(20px, 2.4vw, 22px);   /* card and planet names */
  --size-body:    16px;                       /* was 15px — 16 is the floor */
  --size-small:   14px;
  --size-tiny:    12.5px;

  --track-display: 0em;     /* Fredoka is already wide; give it none */
  --track-label:   .18em;

  /* ---- spacing ----
     One scale, base 4. Everything in estilo.css uses these now;
     there is no 9px, no 14px, no 22px and no 46px any more. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- edges & shadow ---- */
  --radius:       10px;              /* the games use this one */
  --radius-card:  16px;
  --radius-pill:  999px;
  --drop:         0 6px 0 var(--night-drop);   /* the flat cartridge shadow */

  /* ---- motion ---- */
  --beat:      .16s;
  --beat-fast: .08s;
  --ease:      cubic-bezier(.2, .7, .3, 1);

  /* ---- per-world variables ----
     Defaults live here; each world overrides them on its own
     container. Nothing else in the CSS should hardcode a world
     colour. */
  --world-light:  var(--cyan);       /* the world's accent */
  --world-glow:   var(--gold);       /* its highlight */
  --world-back:   var(--night-soft); /* its own darkness */
}