/* =============================================================
   DataConnekt — Design Tokens
   -------------------------------------------------------------
   Every colour, font, radius and shadow in the entire site is
   declared here. Change a value in this file and it propagates
   everywhere — no hunting through page files.

   Palette:
     ink    #0B1220  deep navy background
     cyan   #2DD4E0  electric accent — "instant / connected"
     gold   #FFB020  CTAs and energy
   ============================================================= */

:root {
    /* ── Brand ──────────────────────────────────────────────── */
    --ink:            #0B1220;
    --cyan:           #2DD4E0;
    --gold:           #FFB020;

    /* Tints and shades, derived so accents stay in family */
    --cyan-bright:    #5FE6EF;
    --cyan-deep:      #16A6B4;
    --cyan-glow:      rgba(45, 212, 224, 0.28);
    --cyan-faint:     rgba(45, 212, 224, 0.10);

    --gold-bright:    #FFC652;
    --gold-deep:      #D98E0B;
    --gold-glow:      rgba(255, 176, 32, 0.28);
    --gold-faint:     rgba(255, 176, 32, 0.10);

    /* ── Surfaces (dark = default) ──────────────────────────── */
    --bg:             #0B1220;
    --bg-alt:         #0F1829;
    --surface:        #131E33;
    --surface-2:      #1A2740;
    --surface-hover:  #1F2F4D;
    --overlay:        rgba(11, 18, 32, 0.82);

    /* ── Text ───────────────────────────────────────────────── */
    --text:           #EEF3FA;
    --text-soft:      #9FB0C9;
    --text-muted:     #64748B;
    --text-inverse:   #0B1220;

    /* ── Lines ──────────────────────────────────────────────── */
    --line:           #22304C;
    --line-soft:      rgba(255, 255, 255, 0.06);
    --line-strong:    #2E4066;

    /* ── Status ─────────────────────────────────────────────── */
    --success:        #16C784;
    --success-faint:  rgba(22, 199, 132, 0.12);
    --warning:        #FFB020;
    --warning-faint:  rgba(255, 176, 32, 0.12);
    --danger:         #F0616D;
    --danger-faint:   rgba(240, 97, 109, 0.12);
    --info:           #2DD4E0;
    --info-faint:     rgba(45, 212, 224, 0.12);

    /* ── Network brand colours (for service pickers) ────────── */
    --mtn:            #FFCB05;
    --glo:            #00A650;
    --airtel:         #E4002B;
    --etisalat:       #6BBD46;   /* 9mobile */

    /* ── Typography ─────────────────────────────────────────── */
    --font-display:   'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:      'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --fs-xs:          0.75rem;    /* 12px */
    --fs-sm:          0.8125rem;  /* 13px */
    --fs-base:        0.9375rem;  /* 15px */
    --fs-md:          1.0625rem;  /* 17px */
    --fs-lg:          1.25rem;    /* 20px */
    --fs-xl:          1.625rem;   /* 26px */
    --fs-2xl:         2.125rem;   /* 34px */
    --fs-3xl:         2.75rem;    /* 44px */
    --fs-4xl:         3.5rem;    /* 56px */

    --lh-tight:       1.15;
    --lh-snug:        1.35;
    --lh-normal:      1.6;

    /* ── Spacing ────────────────────────────────────────────── */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
    --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;

    /* ── Radius ─────────────────────────────────────────────── */
    --r-sm:   8px;
    --r:      12px;
    --r-lg:   18px;
    --r-xl:   26px;
    --r-full: 999px;

    /* ── Elevation ──────────────────────────────────────────── */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.22);
    --shadow:      0 8px 28px rgba(0, 0, 0, 0.32);
    --shadow-lg:   0 20px 56px rgba(0, 0, 0, 0.44);
    --shadow-cyan: 0 6px 28px var(--cyan-glow);
    --shadow-gold: 0 6px 28px var(--gold-glow);

    /* ── Motion ─────────────────────────────────────────────── */
    --ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast:    140ms var(--ease);
    --t:         240ms var(--ease);
    --t-slow:    420ms var(--ease-out);

    /* ── Layout ─────────────────────────────────────────────── */
    --sidebar-w:          264px;
    --sidebar-w-collapsed: 76px;
    --topbar-h:           68px;
    --container:          1200px;

    /* ── Gradients ──────────────────────────────────────────── */
    --grad-cyan:  linear-gradient(135deg, var(--cyan-bright), var(--cyan-deep));
    --grad-gold:  linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
    --grad-hero:  radial-gradient(1100px 620px at 78% -8%, rgba(45,212,224,0.16), transparent 62%),
                  radial-gradient(760px 460px at 8% 12%, rgba(255,176,32,0.10), transparent 60%);
    --grad-card:  linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
}

/* =============================================================
   LIGHT MODE
   Applied by adding .light to <body>. Only the surface, text and
   line tokens change — brand colours stay identical so the site
   still reads as DataConnekt in either mode.
   ============================================================= */
body.light {
    --bg:             #F4F7FB;
    --bg-alt:         #FFFFFF;
    --surface:        #FFFFFF;
    --surface-2:      #FFFFFF;
    --surface-hover:  #F0F5FB;
    --overlay:        rgba(15, 24, 41, 0.55);

    --text:           #0B1220;
    --text-soft:      #4A5A73;
    --text-muted:     #8494AB;
    --text-inverse:   #FFFFFF;

    --line:           #E2E9F2;
    --line-soft:      rgba(11, 18, 32, 0.07);
    --line-strong:    #CBD7E6;

    --cyan-deep:      #0E8E9B;
    --gold-deep:      #B87708;

    --shadow-sm:   0 2px 8px rgba(11, 18, 32, 0.06);
    --shadow:      0 8px 28px rgba(11, 18, 32, 0.09);
    --shadow-lg:   0 20px 56px rgba(11, 18, 32, 0.13);

    --grad-card:  linear-gradient(160deg, #FFFFFF 0%, #FBFDFF 100%);
    --grad-hero:  radial-gradient(1100px 620px at 78% -8%, rgba(45,212,224,0.13), transparent 62%),
                  radial-gradient(760px 460px at 8% 12%, rgba(255,176,32,0.09), transparent 60%);
}

/* Respect users who prefer less movement. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}