/* ============================================================
   EasWrk Design Tokens
   Author: Simon Painter

   Single source of truth for shared design values used by both
   easwrk.com (static marketing site) and my.easwrk.com (WHMCS
   client portal). Both surfaces share the .easwrk.com parent
   domain, so one canonical token sheet is what makes the two feel
   like a single product instead of two separate builds.

   This file only declares custom properties. It does not style
   any element and should be loaded before any other stylesheet
   on a page so downstream CSS can reference these variables.

   my.easwrk.com cannot fetch this file directly: it is a
   different DirectAdmin account on a different origin. The portal
   carries its own copy of these exact names and values inside
   custom-brand.css, under the banner "SEAMLESS NAV TOKENS". Keep
   both files in sync when a value here changes.
   ============================================================ */

:root {

  /* Brand: primary blue and its scale */
  --eas-brand: #5BA3DC;
  --eas-brand-dark: #4A93CC;
  --eas-brand-light: #7ABDE8;

  /* Navy: dark neutral base and two lighter steps */
  --eas-navy-900: #01080f;
  --eas-navy-800: #03101c;
  --eas-navy-700: #071828;

  /* Neutrals: grayscale used for text, borders, surfaces */
  --eas-white: #FFFFFF;
  --eas-gray-100: #F6F4FC;
  --eas-gray-300: #D8D5E8;
  --eas-gray-600: #6B6785;
  --eas-gray-900: #211D3E;

  /* Accent: one supporting color for links, highlights, icons */
  --eas-accent: #0B6FA6;

  /* Font: single family shared by both surfaces */
  --eas-font: 'Nunito Sans', sans-serif;

  /* Type scale: h1 down to small print */
  --eas-text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --eas-text-h2: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --eas-text-h3: 1.5rem;
  --eas-text-h4: 1.25rem;
  --eas-text-body: 1rem;
  --eas-text-small: 0.875rem;

  /* Spacing scale: 4px base unit */
  --eas-space-1: 4px;
  --eas-space-2: 8px;
  --eas-space-3: 12px;
  --eas-space-4: 16px;
  --eas-space-5: 24px;
  --eas-space-6: 32px;
  --eas-space-7: 48px;
  --eas-space-8: 64px;

  /* Border radii */
  --eas-radius-sm: 8px;
  --eas-radius-md: 16px;
  --eas-radius-lg: 28px;
  --eas-radius-pill: 999px;

  /* Shadows */
  --eas-shadow-sm: 0 2px 8px rgba(1, 8, 15, 0.10);
  --eas-shadow-md: 0 14px 34px -16px rgba(1, 8, 15, 0.28);
  --eas-shadow-lg: 0 30px 70px -24px rgba(1, 8, 15, 0.38);

}