/* =============================================================
   RockAnalytica — Core Colors & Type Tokens
   Sampled directly from the RockAnalytica logo and the Pitflow
   brand manual (secondary palette + type system).
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* -----------------------------------------------------------
     COLORS — Primary (from RockAnalytica logo)
     ----------------------------------------------------------- */
  --ra-blue-900: #0B3A8A;   /* deepest crest shadow */
  --ra-blue-800: #1355C2;   /* deep curve */
  --ra-blue-700: #1E6BD6;   /* core brand blue */
  --ra-blue-600: #1F8EE8;   /* mid-tone, most common in logo */
  --ra-blue-500: #2FA3EC;   /* bright curve */
  --ra-blue-400: #6CBEF3;   /* sky accent */
  --ra-blue-300: #A9D8F7;   /* tint, surfaces */
  --ra-blue-200: #D5EDF9;   /* lightest tint — panels */
  --ra-blue-100: #ECF6FC;   /* washed tint — backgrounds */

  /* Brand primary shortcut */
  --ra-primary: var(--ra-blue-600);
  --ra-primary-hover: var(--ra-blue-700);
  --ra-primary-press: var(--ra-blue-800);

  /* -----------------------------------------------------------
     COLORS — Ink / neutral scale (cool slate, matches wordmark)
     Sampled wordmark ≈ #2A323B
     ----------------------------------------------------------- */
  --ink-1000: #0F141A;      /* deepest — reserved */
  --ink-900:  #1A212A;      /* headings */
  --ink-800:  #2A323B;      /* wordmark / primary text */
  --ink-700:  #3D4654;      /* secondary text */
  --ink-600:  #5A6473;      /* tertiary / captions */
  --ink-500:  #8892A0;      /* placeholder / icon-muted */
  --ink-400:  #B4BCC7;      /* borders-strong */
  --ink-300:  #D6DCE3;      /* borders */
  --ink-200:  #E8ECF1;      /* hairlines / divider */
  --ink-100:  #F2F5F8;      /* app background tint */
  --ink-50:   #F8FAFC;      /* canvas / card-on-canvas */
  --ink-0:    #FFFFFF;      /* pure white */

  /* -----------------------------------------------------------
     COLORS — Secondary (from Pitflow manual)
     Reserved for data-viz, campaign accents, charts
     ----------------------------------------------------------- */
  --ra-indigo:  #5D69FF;
  --ra-sky:     #80C6FF;
  --ra-lavender:#BA8EFF;
  --ra-lilac:   #E4D4FF;

  /* -----------------------------------------------------------
     COLORS — Semantic
     ----------------------------------------------------------- */
  --color-success:       #1E9E6A;
  --color-success-bg:    #E3F6EE;
  --color-warning:       #D98B1B;
  --color-warning-bg:    #FBF0DC;
  --color-danger:        #D14343;
  --color-danger-bg:     #FBE7E7;
  --color-info:          var(--ra-blue-600);
  --color-info-bg:       var(--ra-blue-100);

  /* -----------------------------------------------------------
     COLORS — Applied roles
     ----------------------------------------------------------- */
  --fg-1:       var(--ink-900);   /* headings */
  --fg-2:       var(--ink-800);   /* body */
  --fg-3:       var(--ink-700);   /* secondary */
  --fg-4:       var(--ink-600);   /* captions */
  --fg-muted:   var(--ink-500);
  --fg-on-primary: #FFFFFF;

  --bg-canvas:  var(--ink-50);
  --bg-surface: #FFFFFF;
  --bg-raised:  #FFFFFF;
  --bg-sunken:  var(--ink-100);
  --bg-tint:    var(--ra-blue-100);

  --border-subtle: var(--ink-200);
  --border:        var(--ink-300);
  --border-strong: var(--ink-400);

  /* -----------------------------------------------------------
     BRAND GRADIENT — mirrors the 3-curve logo
     ----------------------------------------------------------- */
  --ra-gradient-brand:
    linear-gradient(92deg,
      var(--ra-blue-800)   0%,
      var(--ra-blue-600)  42%,
      var(--ra-blue-500)  72%,
      var(--ra-blue-400) 100%);
  --ra-gradient-wash:
    linear-gradient(180deg, var(--ra-blue-100) 0%, #FFFFFF 100%);
  --ra-gradient-panel:
    linear-gradient(180deg, #FFFFFF 0%, var(--ra-blue-100) 100%);

  /* -----------------------------------------------------------
     TYPE — Families
     Asen Pro is not Google-available; Archivo is the closest
     free substitute (geometric sans, Black + Light weights).
     ----------------------------------------------------------- */
  --font-display: 'Archivo', 'Asen Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Archivo', 'Asen Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* -----------------------------------------------------------
     TYPE — Scale (1.200 modular, baseline 16px)
     ----------------------------------------------------------- */
  --fs-11:   11px;
  --fs-12:   12px;
  --fs-13:   13px;
  --fs-14:   14px;   /* small */
  --fs-16:   16px;   /* body */
  --fs-18:   18px;   /* body-lg */
  --fs-20:   20px;   /* h6 */
  --fs-24:   24px;   /* h5 */
  --fs-28:   28px;   /* h4 */
  --fs-32:   32px;   /* h3 */
  --fs-40:   40px;   /* h2 */
  --fs-56:   56px;   /* h1 */
  --fs-72:   72px;   /* display */
  --fs-96:   96px;   /* display-xl */

  /* Weights — mirror Asen Pro Black + Light */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed:1.6;

  /* Letter-spacing — tight on display, wide on eyebrow labels */
  --tracking-tightest: -0.03em;
  --tracking-tight:    -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-widest:    0.18em;  /* eyebrow / all-caps labels */

  /* -----------------------------------------------------------
     SPACING — 4px base
     ----------------------------------------------------------- */
  --space-0:   0;
  --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;
  --space-32:  128px;

  /* -----------------------------------------------------------
     RADII — small, calm (clean/clear layout per brand note)
     ----------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------
     ELEVATION — soft, cool (blue-tinged shadows)
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 55, 125, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 55, 125, 0.07), 0 1px 2px rgba(15,55,125,0.04);
  --shadow-md: 0 6px 18px rgba(15, 55, 125, 0.09), 0 2px 6px rgba(15,55,125,0.05);
  --shadow-lg: 0 18px 40px rgba(15, 55, 125, 0.12), 0 6px 14px rgba(15,55,125,0.06);
  --shadow-xl: 0 32px 80px rgba(15, 55, 125, 0.18);
  --shadow-brand: 0 14px 40px rgba(31, 142, 232, 0.28);

  --ring-focus: 0 0 0 3px rgba(31, 142, 232, 0.35);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.15);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* =============================================================
   Base / Reset
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =============================================================
   Semantic Type
   ============================================================= */
.ra-display-xl, h1.display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-96);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-1);
}

.ra-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-1);
}

h1, .ra-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .ra-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h3, .ra-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h4, .ra-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h5, .ra-h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h6, .ra-h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .ra-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
}
.ra-body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.ra-body-sm, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.ra-caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-4);
}

/* Eyebrow / section label — all caps, tracked out */
.ra-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ra-blue-700);
}

code, kbd, samp, .ra-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 0.12em 0.38em;
  border-radius: var(--radius-xs);
  color: var(--ink-800);
}

a, .ra-link {
  color: var(--ra-blue-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a:hover, .ra-link:hover {
  color: var(--ra-blue-800);
  border-bottom-color: currentColor;
}

/* =============================================================
   Utility: brand gradient text
   ============================================================= */
.ra-gradient-text {
  background: var(--ra-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}