/* ==========================================================================
   Deepend — Design Tokens
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --color-primary:        #0A1628;   /* Deep navy — logo background */
  --color-primary-light:  #142240;
  --color-primary-mid:    #1E3A5F;
  --color-secondary:      #1B5E9E;   /* Petrol blue — matches logo */
  --color-secondary-light:#2678BE;
  --color-accent:         #E91E63;   /* Rosa/Magenta — vibrant accent */
  --color-accent-light:   #F06292;

  /* ── Neutrals (cool‑gray) ── */
  --color-white:    #FFFFFF;
  --color-gray-50:  #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  --color-black:    #020617;

  /* ── Semantic ── */
  --color-success:  #10B981;
  --color-error:    #EF4444;
  --color-warning:  #F59E0B;

  /* ── Gradients ── */
  --gradient-hero:    linear-gradient(135deg, rgba(10,22,40,.92) 0%, rgba(27,94,158,.75) 100%);
  --gradient-dark:    linear-gradient(180deg, var(--color-primary) 0%, var(--color-gray-900) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  --gradient-card:    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 100%);

  /* ── Typography ── */
  --font-family:      'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

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

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* ── Spacing (4px base) ── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  --nav-height: 4.5rem;    /* 72px */

  /* ── Borders ── */
  --radius-sm:   0.25rem;  /* 4px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.06);
  --shadow-glow:0 0 20px rgba(27,94,158,.3);

  /* ── Transitions ── */
  --ease-default: cubic-bezier(.4, 0, .2, 1);
  --ease-in:      cubic-bezier(.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, .2, 1);
  --ease-bounce:  cubic-bezier(.34, 1.56, .64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Z-index scale ── */
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;
}