/* ==========================================================================
   RIVIRhouse Design System — Tokens
   v0.2 — Derived from Brandguide ver.01
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- CORE BRAND ---------- */
  --rivir-coral:       #fc4c4c;   /* Primary brand — from brand guide */
  --rivir-gray:        #848484;   /* Secondary brand — from brand guide */

  /* ---------- CORAL SCALE (derived) ---------- */
  --coral-50:   #fff1f1;
  --coral-100:  #ffdede;
  --coral-200:  #ffbdbd;
  --coral-300:  #ff9494;
  --coral-400:  #fd6b6b;
  --coral-500:  #fc4c4c;   /* brand */
  --coral-600:  #e53434;
  --coral-700:  #bf2525;
  --coral-800:  #8f1a1a;
  --coral-900:  #5a1111;

  /* ---------- NEUTRAL SCALE (cool, slightly warm to harmonize with coral) ---------- */
  --ink-50:   #f7f7f8;
  --ink-100:  #ebecee;
  --ink-200:  #d6d8dc;
  --ink-300:  #b4b7bd;
  --ink-400:  #848484;   /* brand gray */
  --ink-500:  #5f6167;
  --ink-600:  #44464c;
  --ink-700:  #2e3036;
  --ink-800:  #1d1f24;
  --ink-900:  #101217;

  /* ---------- SEMANTIC ---------- */
  --surface:           #ffffff;
  --surface-muted:     var(--ink-50);
  --surface-raised:    #ffffff;
  --surface-inverse:   var(--ink-900);

  --text-primary:      var(--ink-900);
  --text-secondary:    var(--ink-500);
  --text-muted:        var(--ink-400);
  --text-inverse:      #ffffff;
  --text-brand:        var(--coral-600);

  --border-subtle:     var(--ink-100);
  --border-default:    var(--ink-200);
  --border-strong:     var(--ink-300);
  --border-focus:      var(--coral-500);

  --accent:            var(--coral-500);
  --accent-hover:      var(--coral-600);
  --accent-pressed:    var(--coral-700);
  --accent-soft:       var(--coral-50);

  /* Status (derived to coexist with coral — coral is RESERVED for brand, not errors) */
  --success:           #0d9f6e;
  --success-soft:      #e6f7f0;
  --warning:           #c47d00;
  --warning-soft:      #fdf4e1;
  --danger:            #b91c1c;       /* deeper than coral so they don't collide */
  --danger-soft:       #fce8e8;
  --info:              #1d4ed8;
  --info-soft:         #e7edfe;

  /* ---------- TYPOGRAPHY ---------- */
  /* HK Grotesk Bold is the specified brand typeface. Outfit is the chosen free
     analog — geometric with consistent rounded terminals, less machined than
     Space Grotesk. Used for display + headings. Inter handles long-form UI body. */
  --font-display: 'Outfit', 'HK Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'HK Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — 1.250 (major third) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------- 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-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ---------- SHADOWS (restrained — data/enterprise tone) ---------- */
  --shadow-xs: 0 1px 0 rgb(16 18 23 / 0.04);
  --shadow-sm: 0 1px 2px rgb(16 18 23 / 0.05), 0 1px 0 rgb(16 18 23 / 0.03);
  --shadow-md: 0 4px 10px -2px rgb(16 18 23 / 0.06), 0 2px 4px -2px rgb(16 18 23 / 0.04);
  --shadow-lg: 0 16px 32px -8px rgb(16 18 23 / 0.10), 0 4px 10px -4px rgb(16 18 23 / 0.06);
  --shadow-xl: 0 32px 64px -16px rgb(16 18 23 / 0.18), 0 8px 24px -8px rgb(16 18 23 / 0.08);
  --shadow-focus: 0 0 0 3px rgb(252 76 76 / 0.28);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter: var(--space-6);
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; }
input, textarea, select { font-family: inherit; }

/* ==========================================================================
   TYPE UTILITIES
   ========================================================================== */
.display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.heading-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.heading-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.heading-3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.heading-4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.body-lg  { font-size: var(--text-md); line-height: var(--leading-normal); }
.body     { font-size: var(--text-base); line-height: var(--leading-normal); }
.body-sm  { font-size: var(--text-sm); line-height: var(--leading-normal); }
.caption  { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-secondary); }
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--coral-600);
}
.mono { font-family: var(--font-mono); font-size: var(--text-sm); }