/*
 * ============================================================
 *  SECURELY — DESIGN TOKENS
 *  Edit this file to reskin the entire site in minutes.
 *  All colours, fonts, radii and animation speeds live here.
 * ============================================================
 */

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

:root {

    /* ── BRAND COLOURS ─────────────────────────────────────── */
    --color-accent-1:        #0d9488;   /* indigo  — primary accent   */
    --color-accent-2:        #14b8a6;   /* purple  — secondary accent  */
    --color-accent-1-rgb:    13, 148, 136;
    --color-accent-2-rgb:    20, 184, 166;

    /* Gradient (used on headings, buttons, streaks) */
    --gradient-accent:       linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
    --gradient-accent-135:   linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));

    /* ── BACKGROUND ────────────────────────────────────────── */
    --color-bg-base:         #0a0a0c;
    --color-bg-mesh-1:       hsla(168,30%,6%,1);
    --color-bg-mesh-2:       hsla(180,25%,8%,1);
    --color-bg-mesh-3:       hsla(160,20%,7%,1);

    /* Glass / card surfaces */
    --glass-bg:              rgba(255,255,255,0.02);
    --glass-border:          rgba(255,255,255,0.06);
    --glass-blur:            blur(20px);

    /* ── TEXT ───────────────────────────────────────────────── */
    --color-text-primary:    #ffffff;
    --color-text-muted:      #9ca3af;   /* gray-400 */
    --color-text-faint:      #6b7280;   /* gray-500 */
    --color-text-accent:     #2dd4bf;   /* indigo-400 */

    /* ── TYPOGRAPHY ─────────────────────────────────────────── */
    --font-body:             'Inter', sans-serif;
    --font-weight-bold:      700;
    --font-weight-black:     800;

    /* ── BORDER RADIUS ──────────────────────────────────────── */
    --radius-sm:             0.75rem;   /* 12px  */
    --radius-md:             1rem;      /* 16px  */
    --radius-lg:             1.5rem;    /* 24px  */
    --radius-xl:             2rem;      /* 32px  */
    --radius-2xl:            3rem;      /* 48px  */
    --radius-full:           9999px;

    /* ── ANIMATION DURATIONS ────────────────────────────────── */
    --duration-fast:         0.3s;
    --duration-normal:       0.4s;
    --duration-slow:         0.5s;
    --duration-line-pulse:   6s;        /* How it Works travelling streak */
    --duration-testimonials: 32s;       /* Testimonial scroll loop        */

    /* ── SHADOWS ────────────────────────────────────────────── */
    --shadow-accent:         0 20px 40px rgba(var(--color-accent-1-rgb), 0.2);
    --shadow-accent-strong:  0 16px 40px rgba(var(--color-accent-1-rgb), 0.45);
    --shadow-card:           0 24px 48px rgba(var(--color-accent-1-rgb), 0.12);

    /* ── SCROLL ─────────────────────────────────────────────── */
    scroll-behavior: smooth;
}