/* ─── RSLIP DESIGN TOKENS · v3 — Teal / Amber / Emerald / White ─── */
/* Professional palette built around the deep teal brand anchor.
   Amber is the warm complement, emerald the analogous harmony.
   Gradients and glows add depth without clashing. */

:root {
  /* Foreground / background */
  --ink: #0A0A0B;
  --ink-2: #1F2024;
  --ink-3: #44464E;
  --ink-4: #71747C;
  --ink-5: #A4A6AC;
  --line: #E6E6E8;
  --line-2: #EFEFF1;
  --bg: #FAFAF9;
  --bg-2: #F4F4F2;
  --paper: #FFFFFF;

  /* Accent — DEEP TEAL (primary brand) */
  --accent: #0F4F46;
  --accent-hover: #0B3D36;
  --accent-soft: #E8F2EF;
  --accent-ink: #0A3530;
  --accent-2: #2A9D5F;       /* Emerald green — secondary accent */
  --accent-2-soft: #E8F5EE;

  /* ─ NEW: Warm Amber (teal complement) ─ */
  --amber: #D4943A;
  --amber-hover: #BF8230;
  --amber-soft: #FDF4E7;
  --amber-ink: #8B5E1F;

  /* ─ NEW: Rich Emerald (refined green) ─ */
  --emerald: #1B8A5A;
  --emerald-hover: #167248;
  --emerald-soft: #E6F5ED;

  /* ─ NEW: Slate Blue (for variety without clashing) ─ */
  --slate: #4A6FA5;
  --slate-hover: #3D5D8C;
  --slate-soft: #EBF0F7;

  /* Semantic */
  --good: #2A9D5F;
  --warn: #D4943A;
  --bad:  #C73E3E;

  /* ─ Gradients ─ */
  --grad-hero: linear-gradient(135deg, #0F4F46 0%, #1B8A5A 50%, #D4943A 100%);
  --grad-teal-emerald: linear-gradient(135deg, #0F4F46, #1B8A5A);
  --grad-teal-amber: linear-gradient(135deg, #0F4F46, #D4943A);
  --grad-warm: linear-gradient(135deg, #D4943A, #E5B76A);
  --grad-cool: linear-gradient(135deg, #4A6FA5, #0F4F46);
  --grad-manifesto: linear-gradient(160deg, #071F1C 0%, #0A3530 40%, #0F4F46 100%);
  --grad-cta-bg: radial-gradient(ellipse at 30% 50%, rgba(15,79,70,0.08) 0%, transparent 60%),
                 radial-gradient(ellipse at 70% 30%, rgba(212,148,58,0.06) 0%, transparent 50%);

  /* ─ Glows ─ */
  --glow-teal: 0 4px 24px -4px rgba(15, 79, 70, 0.30);
  --glow-amber: 0 4px 24px -4px rgba(212, 148, 58, 0.30);
  --glow-emerald: 0 4px 24px -4px rgba(27, 138, 90, 0.25);
  --glow-slate: 0 4px 24px -4px rgba(74, 111, 165, 0.25);

  /* Type */
  --display: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Radii */
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 18px;

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(10,10,11,0.04), 0 1px 2px rgba(10,10,11,0.04);
  --shadow-2: 0 1px 1px rgba(10,10,11,0.04), 0 8px 24px -8px rgba(10,10,11,0.10);
  --shadow-3: 0 1px 1px rgba(10,10,11,0.04), 0 24px 64px -16px rgba(10,10,11,0.18);

  /* Density */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* ─ Animation timing ─ */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-med: 0.3s;
  --duration-slow: 0.6s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: white; }

/* ─── LOGO ─── */
.rs-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.rs-logo .rs-mark {
  color: var(--ink);
}
.rs-logo .rs-mark-2 {
  color: var(--accent);
}

/* ─── LOGO MARK — two stacked offset rectangles (front sheet / back sheet) ───
   Sized in `em` so it scales with the parent's font-size.
   To override the offset block colour (e.g. on dark surfaces), set
   `--ink` inline on the mark element. */
.rs-logo-mark {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.32em;
  vertical-align: -0.12em;
  flex-shrink: 0;
}
.rs-logo-mark::before,
.rs-logo-mark::after {
  content: '';
  position: absolute;
  border-radius: 0.16em;
  transition: transform var(--duration-med) var(--ease-out-expo);
}
.rs-logo-mark::before {
  inset: 0 19% 19% 0;
  background: var(--ink);
  opacity: 0.18;
}
.rs-logo-mark::after {
  inset: 19% 0 0 19%;
  background: var(--accent);
}
.rs-logo:hover .rs-logo-mark::before { transform: translate(-2px, -2px); }
.rs-logo:hover .rs-logo-mark::after  { transform: translate(2px, 2px); }

/* Optional decorative dot - the teal stop */
.rs-logo .rs-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 4px;
  position: relative;
  top: -1px;
}

/* Eyebrow utility used everywhere — matches the invoice "TAX INVOICE" tracking */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}