@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* ─── PALETTE A · Brand (logo, hero, marketing, presentations) ───────────── */
  --rb-navy:           #00357a;   /* deep blue · trust */
  --rb-navy-700:       #002a63;
  --rb-navy-500:       #1f57a8;
  --rb-navy-200:       #b5c7e3;

  --rb-cream:          #fffbed;   /* warm beige · calm, control */
  --rb-cream-200:      #f6f1dc;
  --rb-cream-400:      #e8dfba;

  --rb-orange:         #ff914d;   /* the accent · construction, energy */
  --rb-orange-600:     #e6722c;
  --rb-orange-200:     #ffd2b3;

  /* ─── PALETTE B · UI Neutrals (platform, dashboards, dense surfaces) ─────── */
  --rb-ink:            #3e3e3e;   /* near-black · headlines, primary text */
  --rb-ink-800:        #2a2a2a;
  --rb-ink-600:        #5a5a5a;
  --rb-ink-400:        #888888;
  --rb-ink-200:        #bdbdbd;

  --rb-paper:          #f0efee;   /* light grey · UI surfaces */
  --rb-paper-50:       #f7f6f4;
  --rb-paper-200:      #e3e2e0;

  --rb-white:          #ffffff;

  /* ─── Semantic foreground / background — neutral default ─────────────────── */
  --fg-1:              var(--rb-ink);        /* primary text */
  --fg-2:              var(--rb-ink-600);    /* secondary text */
  --fg-3:              var(--rb-ink-400);    /* tertiary / placeholders */
  --fg-inverse:        var(--rb-cream);

  --bg-1:              var(--rb-cream);      /* primary canvas */
  --bg-2:              var(--rb-paper-50);   /* card surface on cream */
  --bg-3:              var(--rb-paper);      /* sunken surface */
  --bg-inverse:        var(--rb-ink);

  --accent:            var(--rb-orange);
  --accent-strong:     var(--rb-orange-600);
  --brand:             var(--rb-navy);
  --brand-strong:      var(--rb-navy-700);

  /* ─── Lines, dividers, borders ───────────────────────────────────────────── */
  --line-1:            rgba(62, 62, 62, 0.12);
  --line-2:            rgba(62, 62, 62, 0.20);
  --line-strong:       var(--rb-ink);
  --line-grid:         rgba(62, 62, 62, 0.08);   /* the blueprint grid */

  /* ─── Status colors ──────────────────────────────────────────────────────── */
  --ok:                #2f8a4a;
  --ok-bg:             #e6f3ea;
  --warn:              #d68a1a;
  --warn-bg:           #fbf0d6;
  --danger:            #c5392f;
  --danger-bg:         #fae3df;
  --info:              var(--rb-navy);
  --info-bg:           #dbe5f4;

  /* ─── Type stack ─────────────────────────────────────────────────────────── */
  --font-display:      'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
  --font-wordmark:     'Inter', system-ui, sans-serif;   /* Black 900, -80 tracking */
  --font-sans:         'Inter', system-ui, sans-serif;
  --font-marker:       'Caveat', 'Marker Felt', cursive;
  --font-mono:         ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ─── Type scale (modular, slightly tight) ───────────────────────────────── */
  --t-display-2xl:     clamp(64px, 9vw, 144px);   /* @kind font */
  --t-display-xl:      clamp(48px, 7vw, 96px);    /* @kind font */
  --t-display-lg:      clamp(40px, 5.5vw, 72px);  /* @kind font */
  --t-h1:              48px;
  --t-h2:              36px;
  --t-h3:              28px;
  --t-h4:              22px;
  --t-h5:              18px;
  --t-body-lg:         18px;
  --t-body:            16px;
  --t-body-sm:         14px;
  --t-caption:         12px;
  --t-eyebrow:         11px;

  --lh-tight:          1.02;   /* @kind font */
  --lh-snug:           1.15;   /* @kind font */
  --lh-normal:         1.4;    /* @kind font */
  --lh-relaxed:        1.6;    /* @kind font */

  /* ─── Spacing scale (4-pt) ───────────────────────────────────────────────── */
  --sp-1:              4px;
  --sp-2:              8px;
  --sp-3:              12px;
  --sp-4:              16px;
  --sp-5:              20px;
  --sp-6:              24px;
  --sp-8:              32px;
  --sp-10:             40px;
  --sp-12:             48px;
  --sp-16:             64px;
  --sp-20:             80px;
  --sp-24:             96px;

  /* ─── Radii — subtle, mostly rectangular. The big rounding is in the type. */
  --r-xs:              4px;
  --r-sm:              6px;
  --r-md:              10px;
  --r-lg:              14px;
  --r-xl:              20px;
  --r-pill:            999px;

  /* ─── Shadows — used sparingly, soft and warm ────────────────────────────── */
  --shadow-1:          0 1px 2px rgba(62, 62, 62, 0.06);
  --shadow-2:          0 4px 14px rgba(62, 62, 62, 0.08);
  --shadow-3:          0 10px 32px rgba(62, 62, 62, 0.12);
  --shadow-focus:      0 0 0 3px rgba(255, 145, 77, 0.35);

  /* ─── Blueprint grid background — Rebillo's signature texture ───────────── */
  --grid-size:         32px;
  --grid-bg:
    linear-gradient(to right, var(--line-grid) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(to bottom, var(--line-grid) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    var(--rb-paper);
  /* Navy variant — same grid, cream lines, on navy */
  --grid-bg-navy:
    linear-gradient(to right, rgba(255, 251, 237, 0.07) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(to bottom, rgba(255, 251, 237, 0.07) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    var(--rb-navy);

  /* ─── Motion ─────────────────────────────────────────────────────────────── */
  --ease-out:          cubic-bezier(0.2, 0.7, 0.2, 1);    /* @kind other */
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --dur-fast:          120ms;   /* @kind other */
  --dur-base:          200ms;   /* @kind other */
  --dur-slow:          360ms;   /* @kind other */
}

/* =============================================================================
   Semantic type rules — apply directly to tags.
   ============================================================================= */
.rb-display-2xl,
.rb-display-xl,
.rb-display-lg {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rb-display-2xl { font-size: var(--t-display-2xl); }
.rb-display-xl  { font-size: var(--t-display-xl);  }
.rb-display-lg  { font-size: var(--t-display-lg);  }

.rb-h1, .rb-h2, .rb-h3, .rb-h4, .rb-h5 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.rb-h1 { font-size: var(--t-h1); }
.rb-h2 { font-size: var(--t-h2); }
.rb-h3 { font-size: var(--t-h3); }
.rb-h4 { font-size: var(--t-h4); font-weight: 700; }
.rb-h5 { font-size: var(--t-h5); font-weight: 700; }

.rb-body-lg,
.rb-body,
.rb-body-sm {
  font-family: var(--font-sans);
  color: var(--fg-2);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}
.rb-body-lg { font-size: var(--t-body-lg); }
.rb-body    { font-size: var(--t-body); }
.rb-body-sm { font-size: var(--t-body-sm); }

.rb-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.rb-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.rb-marker {
  font-family: var(--font-marker);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.01em;
}

/* ── Rebillo wordmark · the flat-top trick ───────────────────────
   Reproduces the founder's Canva mod: Inter Black, -80 tracking,
   lowercase, with the rounded shoulders chopped off by a same-color
   overlay (::before). The cover takes its color from `background`
   via `inherit`, so as long as the parent surface is one of the
   brand colors, no manual color swap is needed.

   On surfaces where bg doesn't inherit cleanly (gradients, photos),
   override --rb-wm-cover to the explicit color, or omit the trick.
   --------------------------------------------------------------- */
.rb-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 900;
  letter-spacing: -0.08em;     /* Rebillo's signature -80 tracking */
  text-transform: lowercase;
  color: var(--brand);
  position: relative;
  display: inline-block;
  padding-top: 0.18em;         /* room for the cover */
  --rb-wm-cover: inherit;      /* override per surface if needed */
}
.rb-wordmark::before {
  content: '';
  position: absolute;
  top: 0;
  left: -0.06em;
  right: -0.06em;
  height: 0.32em;              /* how much top to chop */
  background: var(--rb-wm-cover);
  pointer-events: none;
}
.rb-wordmark .dot { color: var(--accent); margin-left: -0.04em; }

/* Convenience surface variants — set the cover color explicitly */
.rb-wordmark.on-cream { --rb-wm-cover: var(--rb-cream); }
.rb-wordmark.on-ink   { --rb-wm-cover: var(--rb-ink);   color: var(--rb-cream); }
.rb-wordmark.on-navy  { --rb-wm-cover: var(--rb-navy);  color: var(--rb-cream); }
.rb-wordmark.on-paper { --rb-wm-cover: var(--rb-paper); }

.rb-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg-1);
}

/* =============================================================================
   Surface modifiers
   ============================================================================= */
.rb-surface-cream     { background: var(--rb-cream); color: var(--fg-1); }
.rb-surface-paper     { background: var(--rb-paper); color: var(--fg-1); }
.rb-surface-ink       { background: var(--rb-ink);   color: var(--fg-inverse); }
.rb-surface-navy      { background: var(--rb-navy);  color: var(--rb-cream); }
.rb-surface-grid      { background: var(--grid-bg); }
.rb-surface-grid-navy { background: var(--grid-bg-navy); color: var(--rb-cream); }