/* ============================================================
   RUBATO GROUP — Brand System
   Shared design tokens, type, and primitives for all assets.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&display=swap');

:root{
  /* ---- Core palette ---- */
  --ink:        #142440;   /* primary deep navy */
  --ink-900:    #0D1830;   /* deepest navy (depth, footers) */
  --ink-800:    #1B2E4F;   /* raised navy panel */
  --ink-700:    #25395C;   /* hairlines on navy */

  --tempo:      #2E90D9;   /* signal blue — the accent */
  --tempo-deep: #1E73B8;
  --tempo-sky:  #5DB7EA;   /* light end of the gradient */
  --tempo-ghost:#173656;   /* very dark blue tint for fills on navy */

  --slate:      #6C7C94;   /* muted secondary type */
  --slate-soft: #97A4B8;

  --paper:      #F6F7F9;   /* light background */
  --paper-warm: #FBFBFC;
  --haze:       #EDEFF3;   /* faint panel on paper */
  --line:       #DDE2EA;   /* hairline on paper */
  --white:      #FFFFFF;

  /* ---- Semantic on light ---- */
  --text:       #142440;
  --text-soft:  #54627A;
  --text-faint: #8B97A9;

  /* ---- Type ---- */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Manrope', system-ui, sans-serif;
  --serif:   'Newsreader', Georgia, serif;

  /* ---- The signature gradient ---- */
  --grad-tempo: linear-gradient(90deg, var(--tempo-sky), var(--tempo-deep));

  /* ---- Rhythm / spacing ---- */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 1px 2px rgba(20,36,64,.04), 0 8px 30px rgba(20,36,64,.06);
  --shadow-card: 0 1px 2px rgba(20,36,64,.05), 0 18px 48px rgba(20,36,64,.10);
}

*{ box-sizing:border-box; }

/* ============================================================
   Logo lockups — recreated from the wordmark, font-driven.
   Usage:
   <span class="rg-logo"><b>RUBATO</b><i>GROUP</i></span>
   ============================================================ */
.rg-logo{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  line-height:1; gap:.32em;
}
.rg-logo b{
  font-family:var(--display); font-weight:800; font-style:normal;
  letter-spacing:.04em; font-size:1em; color:currentColor;
}
.rg-logo i{
  font-family:var(--display); font-weight:500; font-style:normal;
  letter-spacing:.62em; font-size:.40em; padding-left:.06em;
  color:var(--slate); text-indent:.62em;
}
.rg-logo.on-ink i{ color:var(--slate-soft); }

/* Second Tempo wordmark: <span class="st-word">SECOND<b>TEMPO</b></span> */
.st-word{
  font-family:var(--display); font-weight:500; letter-spacing:.02em;
  display:inline-flex; align-items:baseline; line-height:1;
}
.st-word b{ font-weight:800; color:var(--tempo); letter-spacing:.01em; }

/* ============================================================
   Reusable type primitives
   ============================================================ */
.eyebrow{
  font-family:var(--body); font-weight:600; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--tempo-deep);
}
.eyebrow.on-ink{ color:var(--tempo-sky); }
.tm{ font-size:.5em; vertical-align:.7em; font-weight:600; letter-spacing:0; }

.display-xl{ font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:.98; }
.display-l { font-family:var(--display); font-weight:700; letter-spacing:-.015em; line-height:1.04; }
.lede{ font-family:var(--serif); font-weight:300; line-height:1.45; color:var(--text-soft); }

body{ font-family:var(--body); color:var(--text); -webkit-font-smoothing:antialiased; }

/* faint paper texture / grid helper */
.grid-faint{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.5;
}