/* ============================================================
   RunRDP Brand Stylesheet
   Edition 02 · "Deep Current" · Drop into any web project.
   ------------------------------------------------------------
   Dark-first identity. Navy base, teal accent family, a living
   node-network device, and an icy gradient wordmark.
   Class API is unchanged from Edition 01 for easy migration.
   ============================================================ */

/* ----- Webfonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ----- Tokens ----- */
:root {
  /* Dark surfaces */
  --rdp-abyss: #061A2B;
  --rdp-navy:  #0A2540;   /* primary surface */
  --rdp-deep:  #0D3350;   /* raised surface  */
  --rdp-tide:  #11405E;   /* glow / hover    */

  /* Neutrals */
  --rdp-slate: #44626C;   /* body on light  */
  --rdp-mist:  #9FC0C8;   /* secondary on dark */
  --rdp-ice:   #EAF4F6;   /* text on dark   */
  --rdp-paper: #F4F5F7;   /* light surface  */
  --rdp-bone:  #FAFAFA;   /* card on light  */
  --rdp-line:  #E1E4E8;   /* hairline       */

  /* Accents */
  --rdp-coolant: #3FC6CF; /* dark backgrounds only */
  --rdp-current: #2A8A9E; /* light backgrounds / emphasis */
  --rdp-aqua:    #5FD3C2; /* tints, gradients */
  --rdp-kelp:    #5BBF6A; /* highlight, sparingly */

  /* Contextual accent — defaults to Current (light bg).
     Override to Coolant inside dark surfaces (see rules below). */
  --rdp-accent: var(--rdp-current);

  /* Signature gradients */
  --rdp-grad-wordmark: linear-gradient(180deg, #EAFCFF 0%, #7FD4DD 60%, #2A8A9E 100%);
  --rdp-grad-surface:  linear-gradient(135deg, #061A2B 0%, #0A2540 48%, #0D3350 100%);
  --rdp-grad-glow:     radial-gradient(120% 90% at 12% 18%, #11405E 0%, rgba(17,64,94,0) 55%);

  /* Type */
  --rdp-font-display: "Sora", "Geist", ui-sans-serif, system-ui, sans-serif;
  --rdp-font-body:    "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --rdp-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale (modular, 1.25 ratio from 16px) */
  --rdp-size-display: 4rem;     /* 64px */
  --rdp-size-h1:      3rem;     /* 48px */
  --rdp-size-h2:      2rem;     /* 32px */
  --rdp-size-h3:      1.5rem;   /* 24px */
  --rdp-size-body-lg: 1.125rem; /* 18px */
  --rdp-size-body:    1rem;     /* 16px */
  --rdp-size-body-sm: 0.875rem; /* 14px */
  --rdp-size-mono:    0.75rem;  /* 12px */
  --rdp-size-eyebrow: 0.625rem; /* 10px */

  /* Spacing (8px base) */
  --rdp-space-1: 0.5rem;
  --rdp-space-2: 1rem;
  --rdp-space-3: 1.5rem;
  --rdp-space-4: 2rem;
  --rdp-space-6: 3rem;
  --rdp-space-8: 4rem;
  --rdp-space-12: 6rem;

  /* Radii */
  --rdp-radius: 6px;
  --rdp-radius-lg: 16px;
  --rdp-radius-xl: 24px;
}

/* Dark surfaces — swap contextual accent to Coolant */
.rdp-dark, .rdp-deep, .rdp-navy,
[data-theme="dark"], [data-theme="deep"], [data-theme="navy"] {
  --rdp-accent: var(--rdp-coolant);
  background: var(--rdp-navy);
  color: var(--rdp-ice);
}
.rdp-deep, [data-theme="deep"] { background: var(--rdp-deep); }
.rdp-abyss { background: var(--rdp-abyss); color: var(--rdp-ice); --rdp-accent: var(--rdp-coolant); }

/* Signature deep-ocean field (use on hero / full-bleed dark sections) */
.rdp-field {
  background:
    var(--rdp-grad-glow),
    radial-gradient(90% 80% at 88% 90%, #0C3148 0%, rgba(12,49,72,0) 60%),
    var(--rdp-grad-surface);
  color: var(--rdp-ice);
  --rdp-accent: var(--rdp-coolant);
}

/* ----- Base type utilities ----- */
.rdp-display { font-family: var(--rdp-font-display); font-weight: 600; font-size: var(--rdp-size-display); letter-spacing: -0.035em; line-height: 0.95; }
.rdp-h1      { font-family: var(--rdp-font-display); font-weight: 600; font-size: var(--rdp-size-h1);      letter-spacing: -0.03em;  line-height: 1.05; }
.rdp-h2      { font-family: var(--rdp-font-display); font-weight: 500; font-size: var(--rdp-size-h2);      letter-spacing: -0.025em; line-height: 1.1; }
.rdp-h3      { font-family: var(--rdp-font-display); font-weight: 500; font-size: var(--rdp-size-h3);      letter-spacing: -0.02em;  line-height: 1.2; }
.rdp-body-lg { font-family: var(--rdp-font-body); font-size: var(--rdp-size-body-lg); line-height: 1.55; }
.rdp-body    { font-family: var(--rdp-font-body); font-size: var(--rdp-size-body);    line-height: 1.6; }
.rdp-body-sm { font-family: var(--rdp-font-body); font-size: var(--rdp-size-body-sm); line-height: 1.55; }
.rdp-mono    { font-family: var(--rdp-font-mono); font-size: var(--rdp-size-mono); letter-spacing: 0.02em; }
.rdp-eyebrow {
  font-family: var(--rdp-font-mono);
  font-size: var(--rdp-size-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rdp-slate);
  font-weight: 500;
}
.rdp-dark .rdp-eyebrow, .rdp-field .rdp-eyebrow,
[data-theme="dark"] .rdp-eyebrow { color: var(--rdp-accent); }

/* ----- Wordmark (use in nav, footer, headers) ----- */
.rdp-wordmark {
  font-family: var(--rdp-font-body);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: currentColor;
}
.rdp-wordmark > b { font-weight: 700; }

/* Icy gradient treatment — for hero ORCA-style display wordmarks on dark.
   Apply to a heading element; keep it as real, selectable text. */
.rdp-wordmark-grad {
  font-family: var(--rdp-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--rdp-grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Bracket device ----- */
.rdp-brackets {
  font-family: var(--rdp-font-mono);
  font-weight: 300;
  color: var(--rdp-accent);
}

/* ----- Buttons ----- */
.rdp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rdp-space-1);
  padding: 0.75rem 1.25rem;
  font-family: var(--rdp-font-body);
  font-size: var(--rdp-size-body-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid var(--rdp-navy);
  background: var(--rdp-navy);
  color: var(--rdp-ice);
  border-radius: var(--rdp-radius);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.rdp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(6,26,43,0.45); }
.rdp-btn--secondary { background: transparent; color: var(--rdp-navy); border-color: var(--rdp-navy); }
.rdp-dark .rdp-btn--secondary, .rdp-field .rdp-btn--secondary { color: var(--rdp-ice); border-color: rgba(159,192,200,0.4); }
.rdp-btn--accent {
  background: var(--rdp-current); border-color: var(--rdp-current); color: #fff;
}
.rdp-dark .rdp-btn--accent, .rdp-field .rdp-btn--accent {
  background: var(--rdp-coolant); border-color: var(--rdp-coolant); color: var(--rdp-abyss);
}

/* ----- Card ----- */
.rdp-card {
  background: var(--rdp-bone);
  border: 1px solid var(--rdp-line);
  padding: var(--rdp-space-4);
  border-radius: var(--rdp-radius-lg);
}
/* Glass card — for dark surfaces */
.rdp-card--glass {
  background: linear-gradient(180deg, rgba(17,64,94,0.42), rgba(9,30,48,0.55));
  border: 1px solid rgba(120,190,205,0.20);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--rdp-ice);
  border-radius: var(--rdp-radius-xl);
}

/* ----- Link ----- */
.rdp-link {
  color: var(--rdp-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rdp-current);
  text-decoration-thickness: 1.5px;
}
.rdp-dark .rdp-link, .rdp-field .rdp-link, [data-theme="dark"] .rdp-link {
  color: var(--rdp-ice);
  text-decoration-color: var(--rdp-coolant);
}

/* ----- Hairline rule ----- */
.rdp-rule { height: 1px; background: var(--rdp-line); border: none; }
.rdp-dark .rdp-rule, .rdp-field .rdp-rule { background: rgba(159,192,200,0.16); }
.rdp-rule--accent { height: 2px; background: var(--rdp-accent); }
/* Edition 02 tide rule — replaces the old tricolor */
.rdp-rule--tide {
  height: 2px; border: none;
  background: linear-gradient(to right,
    var(--rdp-current) 0%, var(--rdp-coolant) 50%, var(--rdp-aqua) 100%);
}

/* ----- Node-network device -----
   Drop <canvas class="rdp-net"></canvas> as the first child of a
   position:relative dark container, then call rdpNet(canvasEl).
   Decorative; honors prefers-reduced-motion. */
.rdp-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.rdp-net + * { position: relative; z-index: 1; }

/* ----- Grid helpers ----- */
.rdp-grid { display: grid; gap: var(--rdp-space-3); }
.rdp-grid-12 { grid-template-columns: repeat(12, 1fr); }

/* ----- Misuse safeguards ----- */
.rdp-wordmark, .rdp-brackets, .rdp-wordmark-grad { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }

@media (prefers-reduced-motion: reduce) {
  .rdp-net { display: none; }
}