/* ==========================================================================
   Rollstack Design System — colors & type
   Derived from Rollstack ✦ Awesomic Figma (DM Sans + Navy/Sky Blue).
   ========================================================================== */

/* Fonts — DM Sans is the canonical family (all weights used).
   Served from local /fonts (user-uploaded brand files). Variable font covers
   the full weight range; the static TTFs are available as fallbacks. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/DMSans-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/DMSans-Italic-VariableFont_opsz_wght.ttf") format("truetype");
}
/* Static weight fallbacks (for UAs without variable-font support) */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/DMSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/DMSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/DMSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/DMSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/DMSans-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/DMSans-Black.ttf") format("truetype"); }

:root {
  /* ────────────────── BRAND CORE ────────────────── */
  /* Primary hero blue — used on CTAs, logo icon, accents */
  --rs-blue-500: rgb(0, 152, 217);        /* primary */
  --rs-blue-600: rgb(0, 154, 222);        /* hover-shift variant */
  --rs-blue-400: rgb(80, 158, 227);       /* lighter accent */
  --rs-blue-300: rgb(0, 162, 199);        /* teal-leaning accent */

  /* Brand navy — wordmark, body heads, dark surfaces */
  --rs-navy-900: rgb(0, 61, 87);          /* primary navy (ink) */
  --rs-navy-800: rgba(0, 61, 87, 0.92);   /* floating nav bar */
  --rs-slate-700: rgb(67, 84, 103);       /* body secondary text */
  --rs-slate-500: rgb(107, 138, 151);
  --rs-slate-400: rgb(112, 153, 166);

  /* Blue tints — used for card backgrounds, dividers, tinted sections */
  --rs-blue-50:  rgb(245, 252, 255);
  --rs-blue-75:  rgb(248, 252, 254);
  --rs-blue-100: rgb(232, 246, 251);
  --rs-blue-150: rgb(229, 244, 251);      /* workhorse tint (dividers, panels) */
  --rs-blue-200: rgb(203, 236, 251);

  /* Alpha blues — for subtle tints on white */
  --rs-blue-a05: rgba(0, 152, 217, 0.05);
  --rs-blue-a10: rgba(0, 152, 217, 0.10);
  --rs-blue-a20: rgba(0, 152, 217, 0.20);
  --rs-blue-a40: rgba(0, 152, 217, 0.40);

  /* Neutrals */
  --rs-white: rgb(255, 255, 255);
  --rs-off-white: rgb(254, 255, 255);
  --rs-black: rgb(0, 0, 0);
  --rs-border: rgb(236, 237, 237);

  /* Secondary accent (limited use — pastel backgrounds) */
  --rs-mint-500: rgb(5, 205, 185);
  --rs-violet-500: rgb(123, 97, 255);     /* used as illustration accent */

  /* Signature gradient stops — derived from Blog-Banners-2026 figma page.
     These six pairs recur across every 2026 blog header / section backdrop. */
  --rs-grad-mint-a:    rgb(230, 247, 237); /* #E6F7ED */
  --rs-grad-mint-b:    rgb(229, 244, 251); /* #E5F4FB */
  --rs-grad-butter-a:  rgb(255, 251, 229); /* #FFFBE5 */
  --rs-grad-butter-b:  rgb(255, 229, 228); /* #FFE5E4 */
  --rs-grad-sky-a:     rgb(229, 244, 251); /* #E5F4FB */
  --rs-grad-sky-b:     rgb(244, 251, 255); /* #F4FBFF */
  --rs-grad-panel-a:   rgb(255, 255, 255); /* #FFFFFF */
  --rs-grad-panel-m:   rgb(248, 252, 254); /* #F8FCFE */
  --rs-grad-panel-b:   rgb(232, 246, 251); /* #E8F6FB */
  --rs-grad-coral-a:   rgb(255, 127, 72);  /* #FF7F48 */
  --rs-grad-coral-b:   rgb(229, 73, 91);   /* #E5495B */
  --rs-grad-amber-a:   rgb(245, 168, 1);   /* #F5A801 */
  --rs-grad-amber-b:   rgb(229, 141, 0);   /* #E58D00 */

  /* Semantic tokens */
  --fg-1: var(--rs-navy-900);             /* primary ink */
  --fg-2: var(--rs-slate-700);            /* secondary ink */
  --fg-3: var(--rs-slate-500);            /* tertiary / captions */
  --fg-on-dark: var(--rs-white);
  --fg-on-dark-muted: rgba(255,255,255,0.72);

  --bg-1: var(--rs-white);                /* page bg */
  --bg-2: var(--rs-blue-50);              /* section tint */
  --bg-3: var(--rs-blue-150);             /* card on tint */
  --bg-dark: var(--rs-navy-900);
  --bg-dark-glass: var(--rs-navy-800);

  --accent: var(--rs-blue-500);
  --accent-hover: var(--rs-blue-600);
  --accent-tint: var(--rs-blue-a10);
  --accent-tint-strong: var(--rs-blue-a20);

  --divider: var(--rs-blue-150);
  --divider-strong: var(--rs-border);

  /* ────────────────── TYPE ────────────────── */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font weights (DM Sans variable — all available) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Line heights. Figma uses 1.2 almost everywhere for display; 1.4-1.5 body. */
  --lh-tight: 1.1;
  --lh-display: 1.2;
  --lh-body: 1.5;

  /* Letter spacing. Buttons get +2% tracking; headlines are 0. */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-button: 0.02em;

  /* Display (hero + section headers) — big, bold DM Sans */
  --fs-display-xl: 96px;                  /* hero on desktop */
  --fs-display-lg: 64px;
  --fs-display-md: 54px;
  --fs-display-sm: 48px;

  /* Headings */
  --fs-h1: 42px;
  --fs-h2: 32px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;

  /* Body */
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-caption:  12px;

  /* ────────────────── RADII ────────────────── */
  /* Rollstack uses pill CTAs (radius 100), 16px cards, 24px hero surfaces. */
  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 8px;
  --radius-xs: 4px;

  /* ────────────────── SHADOWS ────────────────── */
  /* Brand rarely leans on shadows — the floating nav is the signature. */
  --shadow-nav: 0 6px 12px 0 rgba(0,0,0,0.10);
  --shadow-card: 0 2px 8px 0 rgba(0, 61, 87, 0.06);
  --shadow-card-hover: 0 8px 24px 0 rgba(0, 61, 87, 0.10);
  --shadow-blue-glow: 0 8px 32px 0 rgba(0, 152, 217, 0.20);

  /* ────────────────── SPACING ────────────────── */
  /* 4px base step */
  --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;

  /* Canonical page paddings from Figma: 64px horizontal on 1440 layouts,
     section vertical rhythm 48 / 72 / 96 */
  --gutter-desktop: 64px;
  --gutter-mobile: 20px;

  /* Motion — understated; entrance fades + 200-300ms ease-out */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 420ms;
}

/* ────────────────── SEMANTIC TYPE CLASSES ────────────────── */
/* Apply .rs-type-* directly or compose into component CSS. */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rs-display-xl { font: var(--fw-bold) var(--fs-display-xl)/var(--lh-display) var(--font-sans); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
.rs-display-lg { font: var(--fw-bold) var(--fs-display-lg)/var(--lh-display) var(--font-sans); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
.rs-display-md { font: var(--fw-bold) var(--fs-display-md)/var(--lh-display) var(--font-sans); color: var(--fg-1); }
.rs-display-sm { font: var(--fw-bold) var(--fs-display-sm)/var(--lh-display) var(--font-sans); color: var(--fg-1); }

.rs-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-display) var(--font-sans); color: var(--fg-1); }
.rs-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-display) var(--font-sans); color: var(--fg-1); }
.rs-h3 { font: var(--fw-medium) var(--fs-h3)/var(--lh-display) var(--font-sans); color: var(--fg-1); }
.rs-h4 { font: var(--fw-bold) var(--fs-h4)/1.3 var(--font-sans); color: var(--fg-1); }
.rs-h5 { font: var(--fw-bold) var(--fs-h5)/1.3 var(--font-sans); color: var(--fg-1); }

.rs-body-lg   { font: var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-sans); color: var(--fg-2); }
.rs-body      { font: var(--fw-regular) var(--fs-body-md)/var(--lh-body) var(--font-sans); color: var(--fg-2); }
.rs-body-sm   { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans); color: var(--fg-2); }
.rs-caption   { font: var(--fw-medium) var(--fs-caption)/1.4 var(--font-sans); color: var(--fg-3); letter-spacing: 0.02em; }

.rs-eyebrow   {
  font: var(--fw-bold) var(--fs-body-sm)/1.2 var(--font-sans);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rs-mono      { font: var(--fw-medium) var(--fs-body-sm)/var(--lh-body) var(--font-mono); color: var(--fg-2); }

/* ────────────────── UTILITY CLASSES ────────────────── */
.rs-grad-mint   { background: linear-gradient(var(--rs-grad-mint-a)   0%, var(--rs-grad-mint-b)   100%); }
.rs-grad-butter { background: linear-gradient(var(--rs-grad-butter-a) 0%, var(--rs-grad-butter-b) 100%); }
.rs-grad-sky    { background: linear-gradient(var(--rs-grad-sky-a)    0%, var(--rs-grad-sky-b)    100%); }
.rs-grad-panel  { background: linear-gradient(var(--rs-grad-panel-a)  0%, var(--rs-grad-panel-m) 50%, var(--rs-grad-panel-b) 100%); }
.rs-grad-coral  { background: linear-gradient(var(--rs-grad-coral-a)  6%, var(--rs-grad-coral-b)  100%); }
.rs-grad-amber  { background: linear-gradient(var(--rs-grad-amber-a)  0%, var(--rs-grad-amber-b)  100%); }