/* ==========================================================================
   ASMAANI JODEY : BRAND COLOURS
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE YOU NEED TO EDIT TO CHANGE THE PAGE'S COLOURS.

   Change the four values in the box below, save the file, then reload the
   page. Everything else on the page (text, borders, panels, the glow, the
   buttons) is mixed automatically from these, so the whole design stays
   balanced no matter which colours you choose.

   Do not edit anything below the box unless you know CSS.
   ========================================================================== */

:root{

  /* ====================== EDIT THESE FOUR ONLY ====================== */

  /* 1. GROUND
        The dark background colour of the whole page.
        Keep it very dark or the white text becomes hard to read.
        Blue now: #010726      Green example: #04211A                     */
  --brand-ground: #010726;

  /* 2. ACCENT
        The bright colour. Buttons, links, the glow, small highlights.
        This should be clearly brighter than the ground.
        Blue now: #185FF0      Green example: #18C27A                     */
  --brand-accent: #185FF0;

  /* 3. DEEP BLEND
        Used ONLY inside the moving background glow, never behind text.
        Pick a colour roughly halfway between the two above.
        Blue now: #05176F      Green example: #0A5C3C                     */
  --brand-deep: #05176F;

  /* 4. BUTTON TEXT
        The text colour that sits ON TOP of the accent buttons.
        Use #FFFFFF for dark or medium accents (blue, green, maroon).
        Switch to #010726 only if you pick a very bright accent such as
        yellow or lime, where white text would be unreadable.            */
  --brand-on-accent: #FFFFFF;

  /* =================== END OF THE PART YOU EDIT ==================== */


  /* Everything below is mixed from the four values above. Leave it alone. */

  --bg:         var(--brand-ground);
  --accent:     var(--brand-accent);
  --deep:       var(--brand-deep);
  --on-accent:  var(--brand-on-accent);

  /* A slightly lifted version of the ground, for banded sections and tiles */
  --surface:    color-mix(in oklab, var(--brand-ground) 92%, var(--brand-accent));
  --surface-2:  color-mix(in oklab, var(--brand-ground) 86%, var(--brand-accent));

  /* Hairline rules */
  --line:       color-mix(in oklab, var(--brand-ground) 76%, var(--brand-accent));

  /* Text: near white, pulled a little toward the accent so it never looks cold */
  --ink:        color-mix(in oklab, #FFFFFF 92%, var(--brand-accent));
  --muted:      color-mix(in oklab, #FFFFFF 66%, var(--brand-accent));

  /* A softened accent for SMALL text. The full accent does not have enough
     contrast at small sizes, so small accented text uses this instead. */
  --accent-soft: color-mix(in oklab, var(--brand-accent) 52%, #FFFFFF);
}