/**
 * CSS Variables — DR Digital Solution Design System
 * Brand tokens from SRS §3 (Colors) and §4 (Typography).
 * Import this file FIRST before all other stylesheets.
 */

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

:root {
  /* ─── Brand Colors (from actual logo.jpeg) ─────────────────────────── */
  --color-deep-navy:       #0D1B5E;  /* Logo text dark navy */
  --color-blue:            #2A5FFF;  /* Logo D - bright blue */
  --color-purple:          #7B2FF7;  /* Logo R - vibrant purple */
  --color-white:           #FFFFFF;
  --color-off-white:       #F7F8FC;
  --color-ink:             #0D1B5E;  /* Matches logo text navy */
  --color-muted:           #5B6478;
  --color-border:          #E7E9F5;
  --color-green:           #16A34A;

  /* ─── Brand Gradient (135° Blue → Purple, matches logo) ─────────────── */
  --gradient-brand:        linear-gradient(135deg, #2A5FFF 0%, #7B2FF7 100%);
  --gradient-brand-hover:  linear-gradient(135deg, #1D4FE8 0%, #6a22e0 100%);
  --gradient-text:         linear-gradient(135deg, #2A5FFF 0%, #7B2FF7 100%);

  /* ─── Extended Palette ───────────────────────────────────────────────── */
  --color-blue-light:      #EEF3FF;
  --color-purple-light:    #F3EEFF;
  --color-blue-alpha:      rgba(42, 95, 255, 0.1);
  --color-purple-alpha:    rgba(123, 47, 247, 0.1);
  --color-ink-light:       rgba(13, 27, 94, 0.06);
  --color-white-glass:     rgba(255, 255, 255, 0.80);

  /* ─── Typography (SRS §4) ────────────────────────────────────────────── */
  --font-heading:          'Poppins', system-ui, sans-serif;
  --font-body:             'Inter', 'Poppins', system-ui, sans-serif;

  /* Font weights */
  --fw-regular:            400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;
  --fw-extrabold:          800;

  /* Type scale — desktop (SRS §4) */
  --fs-h1:   3.5rem;    /* 56px */
  --fs-h2:   2.5rem;    /* 40px */
  --fs-h3:   1.75rem;   /* 28px */
  --fs-h4:   1.25rem;   /* 20px */
  --fs-body: 1rem;      /* 16px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-xs:   0.8125rem; /* 13px */
  --fs-eyebrow: 0.75rem;/* 12px */

  /* Line heights */
  --lh-heading: 1.2;
  --lh-body:    1.6;

  /* Letter spacing */
  --ls-eyebrow: 0.15em;
  --ls-button:  0.02em;
  --ls-wide:    0.08em;

  /* ─── Spacing Scale (8pt base) ──────────────────────────────────────── */
  --space-1:   0.5rem;   /* 8px  */
  --space-2:   1rem;     /* 16px */
  --space-3:   1.5rem;   /* 24px */
  --space-4:   2rem;     /* 32px */
  --space-5:   3rem;     /* 48px */
  --space-6:   4rem;     /* 64px */
  --space-7:   6rem;     /* 96px */
  --space-8:   8rem;     /* 128px */

  /* Section padding (desktop / mobile) */
  --section-py:        6rem;    /* 96px desktop */
  --section-py-mobile: 3.5rem;  /* 56px mobile */

  /* ─── Radii ──────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 100px;

  /* ─── Shadows (soft diffused — no hard drops) ───────────────────────── */
  --shadow-xs:  0 1px 4px rgba(10, 15, 44, 0.06);
  --shadow-sm:  0 2px 8px rgba(10, 15, 44, 0.08);
  --shadow-md:  0 4px 20px rgba(10, 15, 44, 0.10);
  --shadow-lg:  0 8px 40px rgba(10, 15, 44, 0.12);
  --shadow-xl:  0 16px 60px rgba(10, 15, 44, 0.14);
  --shadow-2xl: 0 24px 80px rgba(10, 15, 44, 0.18);

  /* Colored glow shadows */
  --shadow-blue:   0 8px 30px rgba(42, 95, 255, 0.25);
  --shadow-purple: 0 8px 30px rgba(123, 47, 247, 0.25);
  --shadow-brand:  0 8px 30px rgba(42, 95, 255, 0.20);

  /* ─── Transitions ────────────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Glass Effect ───────────────────────────────────────────────────── */
  --glass-bg:         rgba(255, 255, 255, 0.80);
  --glass-border:     rgba(255, 255, 255, 0.60);
  --glass-blur:       saturate(180%) blur(12px);

  /* ─── Layout ─────────────────────────────────────────────────────────── */
  --container-max:  1320px;
  --gutter:         1.5rem;   /* 24px */
  --header-height:  76px;
  --z-header:       1000;
  --z-overlay:      1050;
  --z-modal:        1100;
  --z-toast:        1200;
  --z-floating:     999;
}

/* ─── Mobile Type Scale (SRS §4) ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  :root {
    --fs-h1:   2.25rem;  /* 36px */
    --fs-h2:   1.75rem;  /* 28px */
    --fs-h3:   1.375rem; /* 22px */
    --fs-h4:   1.125rem; /* 18px */
    --fs-body: 0.9375rem;/* 15px */
    --section-py: var(--section-py-mobile);
  }
}