/* ============================================================================
   RADIANT CORE — Design System
   The single source of truth for both applications:
     · Radiant Core Customer Application
     · Radiant Core Fund Transfer Application

   Identity: a committed LIGHT, professional banking console.
   Primary is a deliberate indigo-violet (not the reflexive fintech navy),
   paired with cool neutrals tinted toward the brand hue and one luminous
   cyan accent that gives the product its "radiant" signature.
   Colour is expressed in OKLCH for perceptual consistency.
   ========================================================================== */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --rc-primary:      oklch(0.47 0.155 288);   /* Radiant Indigo            */
  --rc-primary-600:  oklch(0.42 0.155 288);
  --rc-primary-700:  oklch(0.36 0.140 289);
  --rc-primary-ink:  oklch(0.98 0.012 288);   /* text on primary           */
  --rc-tint:         oklch(0.962 0.020 288);  /* faint brand wash          */
  --rc-tint-2:       oklch(0.915 0.045 288);  /* stronger brand wash       */

  --rc-accent:       oklch(0.68 0.145 215);   /* Luminous Cyan — the glow  */
  --rc-accent-ink:   oklch(0.40 0.110 220);

  /* ── Neutrals (tinted toward the brand hue, never warm-by-default) ────── */
  --rc-bg:         oklch(0.982 0.004 288);
  --rc-surface:    oklch(1 0 0);
  --rc-surface-2:  oklch(0.972 0.006 288);
  --rc-surface-3:  oklch(0.945 0.008 288);
  --rc-border:     oklch(0.902 0.008 288);
  --rc-border-str: oklch(0.835 0.012 288);
  --rc-ink:        oklch(0.235 0.022 288);   /* body text  ≥ 4.5:1         */
  --rc-ink-2:      oklch(0.375 0.020 288);
  --rc-muted:      oklch(0.498 0.018 288);   /* still ≥ 4.5:1 on white     */
  --rc-faint:      oklch(0.615 0.015 288);

  /* ── Semantic status ──────────────────────────────────────────────────── */
  --rc-ok:         oklch(0.55 0.12 155);
  --rc-ok-tint:    oklch(0.955 0.035 155);
  --rc-ok-ink:     oklch(0.36 0.09 155);
  --rc-warn:       oklch(0.66 0.14 78);
  --rc-warn-tint:  oklch(0.96 0.045 82);
  --rc-warn-ink:   oklch(0.44 0.10 68);
  --rc-danger:     oklch(0.56 0.16 22);
  --rc-danger-tint:oklch(0.955 0.035 22);
  --rc-danger-ink: oklch(0.44 0.14 24);

  /* Ledger semantics (shared by both apps) */
  --rc-debit:      oklch(0.52 0.15 24);
  --rc-credit:     oklch(0.48 0.11 158);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --rc-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rc-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* ── Shape & depth ────────────────────────────────────────────────────── */
  --rc-radius-sm: 8px;
  --rc-radius:    12px;
  --rc-radius-lg: 18px;
  --rc-shadow-sm: 0 1px 2px oklch(0.235 0.022 288 / 0.06), 0 1px 1px oklch(0.235 0.022 288 / 0.04);
  --rc-shadow-md: 0 4px 16px oklch(0.235 0.022 288 / 0.08), 0 1px 3px oklch(0.235 0.022 288 / 0.06);
  --rc-shadow-lg: 0 18px 48px oklch(0.235 0.030 288 / 0.16), 0 4px 12px oklch(0.235 0.022 288 / 0.08);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --rc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Semantic z-scale (never arbitrary values) ────────────────────────── */
  --rc-z-sticky: 100;
  --rc-z-modal-backdrop: 200;
  --rc-z-modal: 210;
  --rc-z-toast: 300;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --rc-sidebar-w: 248px;
}

/* ── Brand lockup ────────────────────────────────────────────────────────── */
.rc-brand { display: flex; align-items: center; gap: 12px; }
.rc-brand-mark {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 11px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--rc-primary), var(--rc-primary-700) 70%);
  box-shadow: var(--rc-shadow-sm);
}
/* the "radiant" arc — the mark's signature */
.rc-brand-mark::after {
  content: ""; position: absolute; inset: -30% -30% auto auto; width: 130%; height: 130%;
  background: radial-gradient(circle at 78% 22%, var(--rc-accent) 0%, transparent 58%);
  opacity: .85;
}
.rc-brand-mark span {
  position: relative; z-index: 1; color: var(--rc-primary-ink);
  font-family: var(--rc-sans); font-weight: 800; font-size: 15px; letter-spacing: -0.03em;
}
.rc-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rc-brand-text strong {
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.012em; color: var(--rc-ink);
  white-space: nowrap;
}
.rc-brand-text span { font-size: 11.5px; color: var(--rc-muted); white-space: nowrap; }

/* ── Product chip (distinguishes the two applications) ───────────────────── */
.rc-product-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border-radius: 999px; background: var(--rc-tint); color: var(--rc-primary-700);
  font-family: var(--rc-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}

/* ── Focus ring (accessibility, applied app-wide) ────────────────────────── */
.rc-focusable:focus-visible,
button:focus-visible, a:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rc-primary);
  outline-offset: 2px;
}

/* ── Reduced motion is not optional ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}