/* =============================================================
   RocketPBX — Colors & Type
   Source of truth for shared design tokens.
   ============================================================= */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand Colors (verbatim from style guide) ---------- */
  --rpbx-blue:        #2780F0;   /* primary, from PDF "#2780˘" */
  --rpbx-blue-exact:  #2780FF;   /* exact client-requested hero accent blue */
  --rpbx-black:       #000000;   /* aaaaac in PDF == near-black for ink */
  --rpbx-ink:         #231F20;   /* logo icon renders as rich black #231F20 in PDF */
  --rpbx-grey:        #898989;   /* subtitle / tagline grey */
  --rpbx-grey-light:  #AAAAAC;   /* inverted / soft-icon grey (PDF "#aaaaac") */
  --rpbx-white:       #FFFFFF;

  /* ---------- Extended Palette (derived, harmonious with brand) */
  --rpbx-blue-050:  #EAF2FE;
  --rpbx-blue-100:  #CCE0FC;
  --rpbx-blue-200:  #99C1F9;
  --rpbx-blue-400:  #5099F4;
  --rpbx-blue-500:  #2780F0;   /* alias of --rpbx-blue */
  --rpbx-blue-600:  #1A68CC;
  --rpbx-blue-700:  #1453A3;
  --rpbx-blue-900:  #0B2F5E;

  --rpbx-ink-900:   #111111;
  --rpbx-ink-800:   #1C1C1E;
  --rpbx-ink-700:   #2C2C2E;

  --rpbx-grey-900:  #3A3A3A;
  --rpbx-grey-700:  #5C5C5C;
  --rpbx-grey-500:  #898989;   /* alias */
  --rpbx-grey-300:  #C7C7C7;
  --rpbx-grey-200:  #DEDEDE;
  --rpbx-grey-100:  #EDEDED;
  --rpbx-grey-050:  #F7F7F7;

  /* ---------- Semantic (system feedback) */
  --rpbx-success:   #1DA879;
  --rpbx-warning:   #E5A400;
  --rpbx-danger:    #D93B3B;
  --rpbx-info:      var(--rpbx-blue-500);

  /* ---------- Semantic roles */
  --fg-1:           var(--rpbx-ink);        /* primary text */
  --fg-2:           var(--rpbx-grey-700);   /* secondary text */
  --fg-3:           var(--rpbx-grey-500);   /* taglines, meta */
  --fg-mute:        var(--rpbx-grey-300);
  --fg-on-blue:     var(--rpbx-white);
  --fg-on-black:    var(--rpbx-white);

  --bg-1:           var(--rpbx-white);      /* canvas */
  --bg-2:           var(--rpbx-grey-050);   /* subtle surface */
  --bg-3:           var(--rpbx-grey-100);   /* card surface */
  --bg-inverted:    var(--rpbx-ink);        /* dark surface */
  --bg-accent:      var(--rpbx-blue);

  --border-1:       var(--rpbx-grey-200);
  --border-2:       var(--rpbx-grey-300);
  --border-strong:  var(--rpbx-ink);
  --border-accent:  var(--rpbx-blue);

  /* ---------- Typography families */
  --font-display:   'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:      'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Brand rules for restrained display type */
  --display-tracking:   0.08em;
  --display-transform:  uppercase;
  --display-weight:     600;
  --display-color:      var(--rpbx-grey-500);

  /* ---------- Type scale (modular, 1.25 ratio) */
  --fs-xs:      12px;
  --fs-sm:      14px;
  --fs-base:    16px;
  --fs-md:      18px;
  --fs-lg:      20px;
  --fs-xl:      24px;
  --fs-2xl:     32px;
  --fs-3xl:     40px;
  --fs-4xl:     56px;
  --fs-5xl:     72px;
  --fs-6xl:     96px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* ---------- Radii (soft, not pillowy) */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ---------- Shadows (low/medium/high elevation) */
  --shadow-1:   0 1px 2px rgba(20,20,30,.06), 0 1px 1px rgba(20,20,30,.04);
  --shadow-2:   0 4px 14px rgba(20,20,30,.08), 0 2px 4px rgba(20,20,30,.04);
  --shadow-3:   0 16px 40px rgba(20,20,30,.12), 0 4px 12px rgba(20,20,30,.06);
  --shadow-blue: 0 10px 30px rgba(39,128,240,.28);
  --ring-focus: 0 0 0 3px rgba(39,128,240,.35);

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

  /* ---------- Motion */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-entry:    cubic-bezier(0,.6,.3,1);
  --ease-exit:     cubic-bezier(.4,0,1,1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* =============================================================
   Semantic element styles — import this file and get these
   applied to h1-h6, p, etc. for quick prototyping.
   ============================================================= */

.rpbx-typography,
.rpbx-typography * { box-sizing: border-box; }

.rpbx-typography {
  font-family: var(--font-body);
  color: var(--fg-1);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* Display — always uppercase, wide tracking, display face */
.rpbx-display,
h1.rpbx, h2.rpbx {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-tracking);
  color: var(--fg-1);
  line-height: var(--lh-tight);
}

h1.rpbx { font-size: var(--fs-5xl); }
h2.rpbx { font-size: var(--fs-3xl); }

/* Sub-display — taglines in grey, same face, uppercase */
.rpbx-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  color: var(--display-color);
  font-size: var(--fs-sm);
}

.rpbx-tagline--blue { color: var(--rpbx-blue); }

/* Body headings keep the body font — readable, modern */
h3.rpbx, h4.rpbx, h5.rpbx {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--fg-1);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h3.rpbx { font-size: var(--fs-2xl); }
h4.rpbx { font-size: var(--fs-xl); }
h5.rpbx { font-size: var(--fs-lg); }

p.rpbx {
  font-family: var(--font-body);
  color: var(--fg-2);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

.rpbx-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-xs);
  color: var(--fg-3);
  font-weight: 500;
}

code.rpbx, pre.rpbx {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}