@import url('./brand-colors.css');

/* ── Typography tokens — single source of truth for the entire project ──
   Every page (nest, dashboard, portal, admin GUI, user GUI) loads this file
   via <link rel="stylesheet" href="/assets/brand.css">, so changing these
   values once retypes everything. Each font-family declaration in the codebase
   uses var(--cr-font-sans) / var(--cr-font-mono) with the same fallback chain
   in case brand.css fails to load. */
:root {
  --cr-font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cr-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

/* Circloud NEST brand block — single source of truth.
   Used in header, nest hero, login pages, portal, description.js.

   Structure:
     <div class="cr-brand" data-size="sm|md|lg">
       <img class="cr-brand-logo" src="...">
       <div class="cr-brand-box">
         <span class="cr-brand-reg">&reg;</span>
         <div class="cr-brand-name">Circloud</div>
         <div class="cr-brand-sub"><span>N</span><span>E</span><span>S</span><span>T</span></div>
       </div>
       <div class="cr-brand-slogan">Local Cloud Platform</div>  (optional)
     </div>

   Sizes: sm (header), md (login), lg (nest hero)
*/

.cr-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.cr-brand-box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: max-content;
}

.cr-brand-name,
.cr-brand-sub {
  font-weight: 600;
}

.cr-brand-name {
  color: var(--text, #fff);
}

.cr-brand-sub {
  display: flex;
  justify-content: space-between;
  /* Reads from assets/brand-colors.css — change there to retint everywhere */
  background: var(--nest-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.cr-brand-sub span {
  display: inline-block;
}

.cr-brand-reg {
  position: absolute;
  top: -0.15em;
  right: -0.7em;
  font-size: 0.35em;
  font-weight: 400;
  opacity: 0.5;
  color: var(--text, #fff);
  -webkit-text-fill-color: var(--text, #fff);
}

.cr-brand-logo {
  height: auto;
  display: block;
  margin-bottom: 0.3em;
  /* width set by JS to match cr-brand-name width */
}

.cr-brand-slogan {
  color: #6d7696;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 0.5em;
}

/* ── Size variants ── */

/* sm: header */
.cr-brand[data-size="sm"] {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.cr-brand[data-size="sm"] .cr-brand-logo {
  width: auto;
  height: 42px;
  margin-bottom: 0;
}
.cr-brand[data-size="sm"] .cr-brand-name { font-size: 1.05rem; }
.cr-brand[data-size="sm"] .cr-brand-sub  { font-size: 0.7rem; }
.cr-brand[data-size="sm"] .cr-brand-slogan {
  display: none;
}

/* md: login pages */
.cr-brand[data-size="md"] .cr-brand-name { font-size: 2rem; }
.cr-brand[data-size="md"] .cr-brand-sub  { font-size: 1.3rem; }
.cr-brand[data-size="md"] .cr-brand-slogan {
  font-size: 13px;
}

/* lg: nest hero */
.cr-brand[data-size="lg"] .cr-brand-name { font-size: 3rem; }
.cr-brand[data-size="lg"] .cr-brand-sub  { font-size: 2rem; }
.cr-brand[data-size="lg"] .cr-brand-slogan {
  font-size: 15px;
}
/* Pin the lg logo to a fixed width on every page so the Circloud Nest hero
   logo and the Circloud Portal main logo render at exactly the same size.
   !important wins over the inline width brand.js writes (which only measured
   the brand-box and could differ by a few pixels between pages).
   180px ≈ the natural width of "Circloud" at 3rem 600-weight Segoe UI. */
.cr-brand[data-size="lg"] .cr-brand-logo {
  width: 180px !important;
  height: auto !important;
}