/* =================================================================
 *  brand.css — Brand palette overrides for My Desktop CertVault
 *  ----------------------------------------------------------------
 *  Inspired by the Google logo palette. The four anchor colors are:
 *    Blue   #4285F4   — primary actions, headings, signature 1 accent
 *    Red    #DB4437   — danger / destructive accents
 *    Yellow #F4B400   — warning / highlight accents
 *    Green  #0F9D58   — success / links / signature 2 accent
 *  Used coherently across the website header, buttons, tables,
 *  alerts, and the certificate itself.
 * ================================================================= */

:root {
  /* ---- Google 4-color anchor palette ---- */
  --g-blue:    #4285F4;
  --g-red:     #DB4437;
  --g-yellow:  #F4B400;
  --g-green:   #0F9D58;

  /* ---- Semantic roles mapped to the 4 colors ---- */
  --primary:        var(--g-blue);     /* headings, primary buttons */
  --primary-strong: #1a73e8;           /* slightly deeper blue for titles */
  --accent:         var(--g-green);    /* borders, links, secondary actions */
  --danger:         var(--g-red);      /* errors, destructive */
  --warning:        var(--g-yellow);   /* warnings, highlights */
  --success:        var(--g-green);    /* success states */

  /* ---- Page background tones (cool neutral, lets the 4 colors pop) ---- */
  --bg:             #f6f8fc;
  --bg-accent:      #eef3fb;
}

/* The brand mark sits on a clean WHITE rounded tile so the
   transparent logo PNG is fully visible without any color bleeding
   through. A subtle 4-color border (blue / red / yellow / green)
   frames the tile to echo the Google-logo palette. */
.brand-mark {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 12px 24px rgba(66, 133, 244, 0.18);
  /* 4-color border drawn via box-shadow stack (outer → inner) */
  border: 2px solid transparent;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(135deg,
      var(--g-blue)   0%,   var(--g-blue)   25%,
      var(--g-red)    25%,  var(--g-red)    50%,
      var(--g-yellow) 50%,  var(--g-yellow) 75%,
      var(--g-green)  75%,  var(--g-green)  100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* A thin 4-color stripe that sits at the very top of every page,
   mirroring the Google-logo color order. */
.site-shell::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    var(--g-blue)   0%, var(--g-blue)   25%,
    var(--g-red)    25%, var(--g-red)    50%,
    var(--g-yellow) 50%, var(--g-yellow) 75%,
    var(--g-green)  75%, var(--g-green)  100%);
  z-index: 30;
}