/* ============================================================================
   Remi Network Story — Design Tokens
   Brand locked from _shared-reconnaissance (remi.ae official system)
   Paper (warm ivory) is the page default; .s-ink remaps tokens per-section.
   ============================================================================ */

/* ── Fonts (self-hosted) ─────────────────────────────────────────────────── */
@font-face { font-family: 'DM Sans'; font-weight: 300; font-display: swap; src: url('../fonts/DMSans-Light.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url('../fonts/DMSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url('../fonts/DMSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url('../fonts/DMSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url('../fonts/DMSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 800; font-display: swap; src: url('../fonts/DMSans-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 900; font-display: swap; src: url('../fonts/DMSans-Black.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-display: swap; src: url('../fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2'); }

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

  /* ── Fluid display scale (landing) ── */
  --fs-hero:    clamp(2.35rem, 1rem + 6.4vw, 6.1rem);
  --fs-display: clamp(2.1rem, 1rem + 3.6vw, 3.9rem);
  --fs-h3:      clamp(1.45rem, 1rem + 1.4vw, 2.1rem);
  --fs-h4:      1.32rem;
  --fs-lead:    clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-caption: 0.78rem;
  --fs-overline: 0.72rem;

  --ls-display: -0.034em;
  --ls-tight:   -0.022em;
  --ls-snug:    -0.014em;
  --ls-label:    0.09em;
  --ls-tag:      0.18em;

  /* ── Radii ── */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── Layout ── */
  --container: 1300px;
  --container-wide: 1500px;
  --section-py: clamp(5rem, 4rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Motion (cinematic-smooth personality) ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    220ms;
  --dur-base:    420ms;
  --dur-slow:    700ms;

  /* ════ PAPER (default canvas) ════ */
  color-scheme: light;

  --remi-accent:        #e8576a;
  --remi-accent-rgb:    232, 87, 106;
  --remi-accent-dark:   #c83f51;
  --remi-accent-soft:   #fbe9e6;
  --remi-accent-border: #f0cfca;
  --remi-logo-fill:     #ef5d68;

  --remi-ink:       #2a2320;
  --remi-ink-rgb:   42, 35, 32;
  --remi-ink-soft:  #574d45;
  --remi-muted:     #8a7d6f;
  --remi-muted-2:   #b3a899;
  --remi-line:      #e7ddcd;
  --remi-line-soft: #f0e9dd;

  --remi-canvas:    #f4eee3;
  --remi-surface:   #fdfaf4;
  --remi-surface-2: #efe8db;
  --remi-surface-3: #f7f2e9;

  --remi-success:      #4f7d5e;
  --remi-success-soft: #e8f0e9;

  /* Operator type accents (paper values) */
  --ty-bank:     #5a6aa0;  --ty-bank-soft:     #eaedf6;
  --ty-exchange: #876aa0;  --ty-exchange-soft: #f0ebf6;
  --ty-mto:      #4f8a86;  --ty-mto-soft:      #e6f1f0;
  --ty-crypto:   #a8803c;  --ty-crypto-soft:   #f4ecda;

  --shadow-sm:     0 1px 2px rgba(58,44,30,.06);
  --shadow-md:     0 6px 18px rgba(58,44,30,.08);
  --shadow-lg:     0 18px 44px rgba(45,33,22,.16);
  --shadow-accent: 0 16px 40px rgba(232,87,106,.20);
  --shadow-hover:  0 5px 22px rgba(58,44,30,.10);

  --remi-frost: rgba(246,240,230,.78);
  --focus-ring: 0 0 0 3px rgba(232,87,106,.18);

  --bg-page:
    radial-gradient(1200px 520px at 82% -12%, rgba(232,87,106,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 116%, rgba(120,92,60,.07), transparent 60%),
    linear-gradient(180deg, #f6f0e6 0%, #f1ebdf 100%);
}

/* ════ INK — warm espresso dark, remapped per-section ════ */
.s-ink, .s-ink-deep {
  color-scheme: dark;

  --remi-accent:        #f4727c;
  --remi-accent-rgb:    244, 114, 124;
  --remi-accent-dark:   #e8576a;
  --remi-accent-soft:   #38231f;
  --remi-accent-border: #4d2f2a;
  --remi-logo-fill:     #f4727c;

  --remi-ink:       #f3ece0;
  --remi-ink-rgb:   243, 236, 224;
  --remi-ink-soft:  #cdc1b1;
  --remi-muted:     #9c9082;
  --remi-muted-2:   #6f6557;
  --remi-line:      #392f28;
  --remi-line-soft: #2f2722;

  --remi-canvas:    #1b1714;
  --remi-surface:   #241f1b;
  --remi-surface-2: #2d2722;
  --remi-surface-3: #282320;

  --remi-success:      #74b187;
  --remi-success-soft: #1e2c24;

  --ty-bank:     #8c9ad2;  --ty-bank-soft:     #232839;
  --ty-exchange: #b394cc;  --ty-exchange-soft: #2c2537;
  --ty-mto:      #6fc2bd;  --ty-mto-soft:      #1f302f;
  --ty-crypto:   #d6ae66;  --ty-crypto-soft:   #332a1b;

  --shadow-sm:     0 1px 2px rgba(0,0,0,.30);
  --shadow-md:     0 6px 20px rgba(0,0,0,.38);
  --shadow-lg:     0 20px 48px rgba(0,0,0,.55);
  --shadow-accent: 0 16px 40px rgba(244,114,124,.22);
  --shadow-hover:  0 6px 24px rgba(0,0,0,.45);

  --remi-frost: rgba(27,23,20,.78);
  --focus-ring: 0 0 0 3px rgba(244,114,124,.22);
}