/* ================================================
   AEKAM AI — DESIGN TOKENS
   Edit this file to restyle the entire website.
   ================================================ */

:root {

  /* --- Brand Colours --- */
  --color-brand:        #FF3B30;   /* Aekam orange/red */
  --color-brand-hover:  #e5342a;
  --color-black:        #0A0A0A;
  --color-white:        #FFFFFF;
  --color-bg:           #FBFBFD;   /* Page background */

  /* --- Greys --- */
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* --- Typography --- */
  --font-family:    'Inter', system-ui, sans-serif;
  --font-size-base: 17.6px;        /* 110% of 16px */

  /* --- Spacing --- */
  --max-width:      1100px;        /* Content container width */
  --header-height:  80px;
  --section-gap:    8rem;

  /* --- Radius --- */
  --radius-sm:  0.75rem;  /* 12px */
  --radius-md:  1.25rem;  /* 20px */
  --radius-lg:  1.75rem;  /* 28px */
  --radius-xl:  2.5rem;   /* 40px */
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-float: 0 20px 40px -15px rgba(0,0,0,0.06);
  --shadow-card:  0 10px 30px -10px rgba(0,0,0,0.09);
  --shadow-glow:  0 0 24px rgba(255,59,48,0.18);

  /* --- Transitions --- */
  --transition: 0.28s ease;
}