/* ============================================================
   vibuta.me — Brand Stylesheet
   "omnis sagitta valet" — every arrow is valid
   Location: /public_html/assets/vibutame-brand.css  ·  shared asset host (assets.vibuta.me)
   Drop this in, then use the tokens & utility classes below.
   ============================================================ */

/* Absolute URLs to the shared asset host so any service resolves the same
   files regardless of subdomain. Served from public_html/assets/ via assets.vibuta.me */
@font-face{font-family:'Fonarto';src:url('https://assets.vibuta.me/fonts/Fonarto-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Fonarto';src:url('https://assets.vibuta.me/fonts/Fonarto-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Fonarto';src:url('https://assets.vibuta.me/fonts/Fonarto-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spectral:ital,wght@0,500;1,400;1,500&display=swap');

:root {
  /* ---- Core brand ---- */
  --vb-purple:        #480C6C;  /* Imperial Purple — the field */
  --vb-purple-900:    #2A0741;  /* deep shade */
  --vb-purple-700:    #380A55;
  --vb-purple-500:    #5E1A86;  /* hover / lift */
  --vb-purple-300:    #9A6FB6;  /* muted accents on dark */
  --vb-purple-100:    #E9DEF1;  /* tint surface on light */

  --vb-gold:          #FCE430;  /* vibuta.me Gold — wordmark & marks */
  --vb-gold-600:      #E4C800;  /* deeper gold for fine detail */

  /* ---- Target accents (use sparingly, like the bullseye) ---- */
  --vb-blue:          #2F71CB;  /* Cobalt */
  --vb-red:           #D12826;  /* Vermilion */
  --vb-target-black:  #111014;
  --vb-target-white:  #FCFCFC;

  /* ---- Neutrals (faintly purple-warmed) ---- */
  --vb-ink:           #241433;  /* primary text on light */
  --vb-ink-soft:      #5B4A6B;  /* secondary text */
  --vb-paper:         #F6F2F9;  /* page surface (light) */
  --vb-paper-2:       #FBF9FD;  /* raised card (light) */
  --vb-line:          #E2D7EC;  /* hairlines on light */
  --vb-white:         #FCFCFC;
  --vb-black:         #111014;

  /* ---- Type ---- */
  --vb-font-display:  'Fonarto', system-ui, sans-serif;  /* headings & wordmark (self-hosted Fonarto: 300/400/700) */
  --vb-font-body:     'Work Sans', system-ui, sans-serif;  /* body, UI */
  --vb-font-motto:    'Spectral', Georgia, serif;          /* Latin & scholarly */

  /* ---- Geometry ---- */
  --vb-radius:        14px;
  --vb-radius-lg:     22px;
  --vb-radius-pill:   999px;
  --vb-stroke:        2px;       /* monoline icon weight */
  --vb-shadow:        0 10px 30px -12px rgba(42, 7, 65, 0.45);
  --vb-shadow-sm:     0 2px 10px -4px rgba(42, 7, 65, 0.35);
  --vb-maxw:          1080px;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

body.vb {
  margin: 0;
  font-family: var(--vb-font-body);
  color: var(--vb-ink);
  background: var(--vb-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vb h1, .vb h2, .vb h3, .vb h4, .vb .vb-display {
  font-family: var(--vb-font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.vb-wordmark {
  font-family: var(--vb-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--vb-gold);
  white-space: nowrap;   /* keep "vibuta.me" whole — never wrap/truncate to "vibuta" */
}
.vb-wordmark .dot { color: var(--vb-gold); }

.vb-motto {
  font-family: var(--vb-font-motto);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ============================================================
   Surfaces
   ============================================================ */
.vb-field {            /* the signature purple field */
  background: var(--vb-purple);
  color: var(--vb-white);
}
.vb-field--deep { background: var(--vb-purple-900); color: var(--vb-white); }

.vb-card {
  background: var(--vb-paper-2);
  border: 1px solid var(--vb-line);
  border-radius: var(--vb-radius-lg);
  box-shadow: var(--vb-shadow-sm);
}

/* ============================================================
   Buttons
   ============================================================ */
.vb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--vb-font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  padding: 0.85em 1.5em;
  border-radius: var(--vb-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.vb-btn:active { transform: translateY(1px); }

.vb-btn--primary {           /* gold on purple — the hero action */
  background: var(--vb-gold);
  color: var(--vb-purple-900);
}
.vb-btn--primary:hover { background: #fff06b; }

.vb-btn--onfield {           /* used on the purple field */
  background: var(--vb-gold);
  color: var(--vb-purple-900);
}

.vb-btn--ghost {             /* outline on light */
  background: transparent;
  color: var(--vb-purple);
  border-color: var(--vb-purple);
}
.vb-btn--ghost:hover { background: var(--vb-purple); color: var(--vb-white); }

.vb-btn--ghost-gold {        /* outline on the purple field */
  background: transparent;
  color: var(--vb-gold);
  border-color: var(--vb-gold);
}
.vb-btn--ghost-gold:hover { background: var(--vb-gold); color: var(--vb-purple-900); }

/* ============================================================
   Badges / pills
   ============================================================ */
.vb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--vb-font-display);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4em 0.85em;
  border-radius: var(--vb-radius-pill);
  background: var(--vb-purple-100);
  color: var(--vb-purple);
}
.vb-badge--gold { background: var(--vb-gold); color: var(--vb-purple-900); }
.vb-badge--field { background: var(--vb-purple); color: var(--vb-gold); }

/* ============================================================
   Icon system — monoline gold/ink, rounded, like the crest line-art
   ============================================================ */
.vb-icon {
  width: 1.5em; height: 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--vb-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Dark theme — admin / logged-in surfaces
   Public pages stay light (the default). For the admin side add
   class="vb vb-dark" to <body> (or data-vb-theme="dark"). Tokens
   re-map so cards, buttons and badges adapt automatically. Gold
   stays gold; the purple field becomes a feature surface.
   ============================================================ */
.vb-dark, [data-vb-theme="dark"] {
  color-scheme: dark;
  --vb-paper:        #160A20;   /* app canvas */
  --vb-paper-2:      #1F0F2E;   /* raised panel / card */
  --vb-line:         #36234C;   /* hairline on dark */
  --vb-purple-100:   #2A1640;   /* tint surface → dark raised tint */
  --vb-ink:          #F3ECFA;   /* primary text */
  --vb-ink-soft:     #B7A4CB;   /* secondary text */
  --vb-blue:         #5B9BE8;   /* Cobalt, lifted for dark */
  --vb-red:          #F0675A;   /* Vermilion, lifted for dark */
  --vb-d-elevated:   #2A1640;   /* hover / popover */
  --vb-d-field:      #480C6C;   /* Imperial Purple as a feature surface */
  --vb-d-ink-mute:   #8A77A0;   /* tertiary / captions */
  --vb-shadow:       0 14px 38px -14px rgba(0,0,0,.65);
  --vb-shadow-sm:    0 2px 12px -4px rgba(0,0,0,.55);
}
body.vb.vb-dark { background: var(--vb-paper); color: var(--vb-ink); }
.vb-dark .vb-badge            { background: rgba(252,228,48,.10); color: var(--vb-gold); }
.vb-dark .vb-badge--gold      { background: var(--vb-gold); color: var(--vb-purple-900); }
.vb-dark .vb-btn--ghost       { color: var(--vb-ink); border-color: var(--vb-purple-300); }
.vb-dark .vb-btn--ghost:hover { background: var(--vb-purple-300); color: var(--vb-purple-900); }