/* ============================================================================
   RAMP DESIGN SYSTEM — TOKENS
   A faithful reconstruction of ramp.com's visual language.

   Palette anchors (from Ramp brand):
     Obsidian   #0C0A08   near-black ink & dark surfaces
     Limestone  #F4F2F0   warm off-white paper
     Slate      #4D505D   cool neutral (borders, secondary ink)
     Chartreuse #E4F222   the single chromatic accent (CTAs, focus)
     Sky        #5683D2   secondary chromatic (links, info, gradients)

   Everything below is a primitive (--rmp-*) or a semantic alias.
   Components should reference SEMANTIC tokens, never raw primitives.
   ============================================================================ */

:root {
  /* ── Primitive: warm neutral ramp (Limestone → Obsidian) ───────────────── */
  --rmp-neutral-0:   #ffffff;
  --rmp-neutral-50:  #f4f2f0;  /* Limestone */
  --rmp-neutral-100: #eceae6;
  --rmp-neutral-150: #e4e1db;
  --rmp-neutral-200: #d9d5cd;
  --rmp-neutral-300: #c6c2b9;
  --rmp-neutral-400: #a19d94;
  --rmp-neutral-500: #7c7972;
  --rmp-neutral-600: #57544f;
  --rmp-neutral-700: #3a3833;
  --rmp-neutral-800: #232120;
  --rmp-neutral-900: #141310;
  --rmp-neutral-950: #0c0a08;  /* Obsidian */

  /* ── Primitive: slate (cool neutral) ──────────────────────────────────── */
  --rmp-slate-300: #b7b9c0;
  --rmp-slate-400: #8b8e98;
  --rmp-slate-500: #4d505d;  /* Slate */
  --rmp-slate-600: #3a3d47;
  --rmp-slate-700: #2a2c33;

  /* ── Primitive: chartreuse (accent) ───────────────────────────────────── */
  --rmp-lime-50:  #fafce6;
  --rmp-lime-100: #f3f9bd;
  --rmp-lime-200: #ecf58a;
  --rmp-lime-300: #e9f451;
  --rmp-lime-400: #e4f222;  /* Chartreuse — brand accent */
  --rmp-lime-500: #cfdc10;
  --rmp-lime-600: #b0bb07;
  --rmp-lime-700: #8a9200;

  /* ── Primitive: sky (secondary chromatic) ─────────────────────────────── */
  --rmp-sky-100: #e2eaf7;
  --rmp-sky-300: #9db6e6;
  --rmp-sky-500: #5683d2;
  --rmp-sky-600: #3e69b4;
  --rmp-sky-700: #2f5091;

  /* ── Primitive: status (muted to sit inside the neutral world) ────────── */
  --rmp-green-50:  #e9f4ec;
  --rmp-green-500: #2e7d4f;
  --rmp-green-600: #226340;
  --rmp-amber-50:  #fbf1dc;
  --rmp-amber-500: #b7791f;
  --rmp-amber-600: #96610f;
  --rmp-red-50:    #f9e9e7;
  --rmp-red-500:   #c0362c;
  --rmp-red-600:   #9e2820;

  /* ── Typography primitives ────────────────────────────────────────────── */
  /* Lausanne (loaded via fonts.css once trial files are dropped in) →
     Hanken Grotesk (OFL, bundled) → neutral Swiss grotesque system fallbacks. */
  --rmp-font-sans: "Lausanne", "TWK Lausanne", "Hanken Grotesk",
                   "Neue Haas Grotesk Display", "Helvetica Neue",
                   Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --rmp-font-mono: "Berkeley Mono", "SF Mono", "IBM Plex Mono", ui-monospace,
                   "Menlo", "Consolas", monospace;

  --rmp-weight-light:   300;
  --rmp-weight-regular: 400;
  --rmp-weight-medium:  500;
  --rmp-weight-bold:    700;

  /* Type scale — 64 hero → 13 caption (Ramp's stated range). */
  --rmp-size-display: 4rem;      /* 64px */
  --rmp-size-h1:      3rem;      /* 48px */
  --rmp-size-h2:      2.25rem;   /* 36px */
  --rmp-size-h3:      1.5rem;    /* 24px */
  --rmp-size-h4:      1.25rem;   /* 20px */
  --rmp-size-lg:      1.125rem;  /* 18px */
  --rmp-size-body:    1rem;      /* 16px */
  --rmp-size-sm:      0.875rem;  /* 14px */
  --rmp-size-caption: 0.8125rem; /* 13px */
  --rmp-size-micro:   0.6875rem; /* 11px */

  --rmp-leading-tight:   1.05;
  --rmp-leading-snug:    1.2;
  --rmp-leading-normal:  1.5;
  --rmp-leading-relaxed: 1.65;

  /* Ramp tightens tracking on large display type, opens it on micro labels. */
  --rmp-tracking-display: -0.03em;
  --rmp-tracking-tight:   -0.015em;
  --rmp-tracking-normal:  0;
  --rmp-tracking-wide:    0.02em;
  --rmp-tracking-caps:    0.08em;

  /* ── Spacing scale (4px base, airy) ───────────────────────────────────── */
  --rmp-space-0:  0;
  --rmp-space-1:  0.25rem;  /* 4  */
  --rmp-space-2:  0.5rem;   /* 8  */
  --rmp-space-3:  0.75rem;  /* 12 */
  --rmp-space-4:  1rem;     /* 16 */
  --rmp-space-5:  1.5rem;   /* 24 */
  --rmp-space-6:  2rem;     /* 32 */
  --rmp-space-7:  3rem;     /* 48 */
  --rmp-space-8:  4rem;     /* 64 */
  --rmp-space-9:  6rem;     /* 96 */
  --rmp-space-10: 8rem;     /* 128 */

  /* ── Radius — strict two-step system ──────────────────────────────────── */
  --rmp-radius-control: 4px;    /* buttons, inputs, chips, functional controls */
  --rmp-radius-surface: 12px;   /* cards, panels, modals, media */
  --rmp-radius-pill:    999px;  /* tags, avatars, toggles */

  /* ── Borders (hairline is core to the aesthetic) ──────────────────────── */
  --rmp-border-width: 1px;

  /* ── Elevation — restrained; Ramp leans on borders, not shadow ────────── */
  --rmp-shadow-none: none;
  --rmp-shadow-xs: 0 1px 2px rgba(12, 10, 8, 0.05);
  --rmp-shadow-sm: 0 1px 3px rgba(12, 10, 8, 0.06), 0 1px 2px rgba(12, 10, 8, 0.04);
  --rmp-shadow-md: 0 6px 16px rgba(12, 10, 8, 0.08), 0 2px 4px rgba(12, 10, 8, 0.04);
  --rmp-shadow-lg: 0 18px 40px rgba(12, 10, 8, 0.12), 0 4px 10px rgba(12, 10, 8, 0.05);
  --rmp-shadow-focus: 0 0 0 3px rgba(228, 242, 34, 0.55);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --rmp-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --rmp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --rmp-dur-fast:    120ms;
  --rmp-dur-base:    200ms;
  --rmp-dur-slow:    360ms;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --rmp-container:   1200px;
  --rmp-container-narrow: 760px;

  /* ═══════════════════════════════════════════════════════════════════════
     SEMANTIC TOKENS — LIGHT (default). Components use ONLY these.
     ═══════════════════════════════════════════════════════════════════════ */
  --rmp-bg:            var(--rmp-neutral-50);   /* warm paper */
  --rmp-bg-raised:     var(--rmp-neutral-0);    /* cards sit slightly lighter */
  --rmp-bg-sunken:     var(--rmp-neutral-100);
  --rmp-bg-inverse:    var(--rmp-neutral-950);

  --rmp-surface:       var(--rmp-neutral-0);
  --rmp-surface-hover: var(--rmp-neutral-100);
  --rmp-surface-active:var(--rmp-neutral-150);

  --rmp-ink:           var(--rmp-neutral-950);  /* primary text */
  --rmp-ink-secondary: var(--rmp-slate-500);
  --rmp-ink-muted:     var(--rmp-neutral-400);
  --rmp-ink-inverse:   var(--rmp-neutral-50);
  --rmp-ink-on-accent: var(--rmp-neutral-950);  /* black on chartreuse */

  --rmp-border:        var(--rmp-neutral-200);  /* hairline */
  --rmp-border-strong: var(--rmp-neutral-300);
  --rmp-border-inverse:var(--rmp-slate-600);

  --rmp-accent:        var(--rmp-lime-400);
  --rmp-accent-hover:  var(--rmp-lime-500);
  --rmp-accent-active: var(--rmp-lime-600);
  --rmp-accent-subtle: var(--rmp-lime-50);

  --rmp-link:          var(--rmp-sky-600);
  --rmp-link-hover:    var(--rmp-sky-700);

  --rmp-info:          var(--rmp-sky-600);
  --rmp-info-bg:       var(--rmp-sky-100);
  --rmp-border-hover:  var(--rmp-slate-400);

  --rmp-success:       var(--rmp-green-500);
  --rmp-success-bg:    var(--rmp-green-50);
  --rmp-warning:       var(--rmp-amber-500);
  --rmp-warning-bg:    var(--rmp-amber-50);
  --rmp-danger:        var(--rmp-red-500);
  --rmp-danger-bg:     var(--rmp-red-50);

  --rmp-focus-ring:    var(--rmp-shadow-focus);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC TOKENS — DARK (obsidian). Ramp uses full-bleed dark sections.
   Apply with <html data-theme="dark"> or [data-theme="dark"] on any subtree.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --rmp-bg:            var(--rmp-neutral-950);
  --rmp-bg-raised:     var(--rmp-neutral-900);
  --rmp-bg-sunken:     #060504;
  --rmp-bg-inverse:    var(--rmp-neutral-50);

  --rmp-surface:       var(--rmp-neutral-900);
  --rmp-surface-hover: var(--rmp-neutral-800);
  --rmp-surface-active:var(--rmp-neutral-700);

  --rmp-ink:           var(--rmp-neutral-50);
  --rmp-ink-secondary: var(--rmp-slate-400);
  --rmp-ink-muted:     var(--rmp-neutral-500);
  --rmp-ink-inverse:   var(--rmp-neutral-950);
  --rmp-ink-on-accent: var(--rmp-neutral-950);

  --rmp-border:        var(--rmp-neutral-800);
  --rmp-border-strong: var(--rmp-neutral-700);
  --rmp-border-inverse:var(--rmp-neutral-300);

  --rmp-accent:        var(--rmp-lime-400);
  --rmp-accent-hover:  var(--rmp-lime-300);
  --rmp-accent-active: var(--rmp-lime-200);
  --rmp-accent-subtle: rgba(228, 242, 34, 0.12);

  --rmp-link:          var(--rmp-sky-300);
  --rmp-link-hover:    #c3d6f5;

  --rmp-info:          var(--rmp-sky-300);
  --rmp-info-bg:       rgba(86, 131, 210, 0.16);
  --rmp-border-hover:  var(--rmp-slate-400);

  --rmp-success:       #4caf7d;
  --rmp-success-bg:    rgba(46, 125, 79, 0.16);
  --rmp-warning:       #d69a3a;
  --rmp-warning-bg:    rgba(183, 121, 31, 0.16);
  --rmp-danger:        #e06a60;
  --rmp-danger-bg:     rgba(192, 54, 44, 0.18);

  --rmp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --rmp-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55);
  --rmp-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rmp-dur-fast: 1ms;
    --rmp-dur-base: 1ms;
    --rmp-dur-slow: 1ms;
  }
}