/* ================================================================
   RUMDIGI v2 — CSS Custom Properties (Design System)
   Colors extracted from brand logo: deep blue + orange-red accent
   ================================================================ */

:root {
  /* === BRAND COLORS === */
  --rd-blue-900: #04111f;
  --rd-blue-800: #070F1A;
  --rd-blue-700: #0D1E2E;
  --rd-blue-600: #112233;
  --rd-blue-500: #1A3D5C;
  --rd-blue-400: #2A6F97;
  --rd-blue-300: #56BADC;
  --rd-blue-200: #90D4EC;
  --rd-blue-100: #D4EEF8;

  --rd-orange-600: #C4470D;
  --rd-orange-500: #E8651A;
  --rd-orange-400: #F4873A;
  --rd-orange-300: #F4A435;
  --rd-orange-100: #FDEBD5;

  /* === SEMANTIC COLORS === */
  --rd-bg:        var(--rd-blue-800);
  --rd-bg-2:      var(--rd-blue-700);
  --rd-bg-card:   var(--rd-blue-600);
  --rd-bg-glass:  rgba(17, 34, 51, 0.72);

  --rd-primary:   var(--rd-blue-400);
  --rd-primary-light: var(--rd-blue-300);
  --rd-accent:    var(--rd-orange-500);
  --rd-accent-warm: var(--rd-orange-300);

  --rd-text:      #EDF2F7;
  --rd-text-2:    #A8BDD4;
  --rd-text-3:    #6B87A0;
  --rd-text-invert: #0D1E2E;

  --rd-border:       rgba(86, 186, 220, 0.10);
  --rd-border-hover: rgba(86, 186, 220, 0.25);
  --rd-border-accent: rgba(232, 101, 26, 0.30);

  /* === GRADIENTS === */
  --rd-grad-hero:    linear-gradient(135deg, #04111f 0%, #0D1E2E 60%, #152A3D 100%);
  --rd-grad-blue:    linear-gradient(135deg, var(--rd-blue-400), var(--rd-blue-300));
  --rd-grad-accent:  linear-gradient(135deg, var(--rd-orange-500), var(--rd-orange-300));
  --rd-grad-card:    linear-gradient(145deg, rgba(42,111,151,0.08) 0%, rgba(17,34,51,0) 100%);
  --rd-grad-text:    linear-gradient(135deg, var(--rd-blue-300), var(--rd-orange-400));
  --rd-grad-shine:   linear-gradient(105deg, transparent 40%, rgba(86,186,220,0.06) 50%, transparent 60%);

  /* === TYPOGRAPHY === */
  --rd-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rd-font-mono:   'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --rd-text-xs:   0.75rem;     /* 12px */
  --rd-text-sm:   0.875rem;    /* 14px */
  --rd-text-base: 1rem;        /* 16px */
  --rd-text-lg:   1.125rem;    /* 18px */
  --rd-text-xl:   1.25rem;     /* 20px */
  --rd-text-2xl:  1.5rem;      /* 24px */
  --rd-text-3xl:  1.875rem;    /* 30px */
  --rd-text-4xl:  2.25rem;     /* 36px */
  --rd-text-5xl:  3rem;        /* 48px */
  --rd-text-6xl:  3.75rem;     /* 60px */

  --rd-fw-light:   300;
  --rd-fw-normal:  400;
  --rd-fw-medium:  500;
  --rd-fw-semi:    600;
  --rd-fw-bold:    700;

  --rd-lh-tight:   1.25;
  --rd-lh-snug:    1.375;
  --rd-lh-normal:  1.6;
  --rd-lh-loose:   1.8;

  /* === SPACING === */
  --rd-space-1:   0.25rem;
  --rd-space-2:   0.5rem;
  --rd-space-3:   0.75rem;
  --rd-space-4:   1rem;
  --rd-space-5:   1.25rem;
  --rd-space-6:   1.5rem;
  --rd-space-8:   2rem;
  --rd-space-10:  2.5rem;
  --rd-space-12:  3rem;
  --rd-space-16:  4rem;
  --rd-space-20:  5rem;
  --rd-space-24:  6rem;
  --rd-space-32:  8rem;

  /* === BORDERS === */
  --rd-radius-sm:   6px;
  --rd-radius-md:   10px;
  --rd-radius-lg:   14px;
  --rd-radius-xl:   20px;
  --rd-radius-2xl:  28px;
  --rd-radius-full: 9999px;

  /* === SHADOWS === */
  --rd-shadow-sm:   0 2px 8px rgba(4, 17, 31, 0.4);
  --rd-shadow-md:   0 4px 20px rgba(4, 17, 31, 0.5);
  --rd-shadow-lg:   0 8px 40px rgba(4, 17, 31, 0.6);
  --rd-shadow-xl:   0 20px 60px rgba(4, 17, 31, 0.7);
  --rd-shadow-blue: 0 4px 24px rgba(42, 111, 151, 0.25);
  --rd-shadow-accent: 0 4px 24px rgba(232, 101, 26, 0.30);
  --rd-shadow-glow: 0 0 40px rgba(86, 186, 220, 0.12);

  /* === GLASS EFFECT === */
  --rd-glass-bg:     rgba(13, 30, 46, 0.70);
  --rd-glass-border: rgba(86, 186, 220, 0.12);
  --rd-glass-blur:   blur(20px) saturate(180%);

  /* === TRANSITIONS === */
  --rd-trans-fast:   all 0.15s ease;
  --rd-trans-base:   all 0.25s ease;
  --rd-trans-slow:   all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* === LAYOUT === */
  --rd-container:    1200px;
  --rd-header-h:     72px;
  --rd-section-py:   var(--rd-space-24);

  /* === Z-INDEX === */
  --rd-z-base:    1;
  --rd-z-card:    10;
  --rd-z-overlay: 100;
  --rd-z-header:  200;
  --rd-z-toast:   900;
  --rd-z-modal:   1000;
}

/* Dark scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--rd-bg); }
::-webkit-scrollbar-thumb { background: var(--rd-primary); border-radius: var(--rd-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--rd-primary-light); }