/*
 * Eclipse Services — Design Tokens
 * Single source of truth for all brand values.
 * Import before all other stylesheets.
 */

:root {

  /* ── Colour palette ───────────────────────────────────────── */

  --color-cyan:        #00AEEF;   /* Primary — CTAs, links, accents, active states */
  --color-cyan-dark:   #0090C8;   /* Hover / pressed states                        */
  --color-cyan-light:  #E0F6FD;   /* Tinted surfaces, info panels                  */
  --color-black:       #1A1A1A;   /* Hero bg, nav, footer, headings                */
  --color-charcoal:    #2D2D2D;   /* Secondary dark surfaces                       */
  --color-mid-grey:    #888888;   /* Body text on dark, captions                   */
  --color-off-white:   #F5F6F7;   /* Alternate section backgrounds, card fills     */
  --color-white:       #FFFFFF;   /* Primary content surface                       */
  --color-body-text:   #4A4A4A;   /* Body text on light backgrounds                */

  /* Semantic overlays */
  --color-border:      rgba(0, 0, 0, 0.08);
  --color-border-dark: rgba(255, 255, 255, 0.08);
  --color-white-dim:   rgba(255, 255, 255, 0.85);  /* Body text on cyan/dark CTAs    */
  --color-cyan-tint:   rgba(0, 174, 239, 0.08);    /* Hover bg on dark surfaces      */
  --color-cyan-focus:  rgba(0, 174, 239, 0.15);    /* Focus ring shadow              */


  /* ── Typography ──────────────────────────────────────────── */

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Sizes */
  --font-size-display: 3rem;       /* 48px — Display / H1 */
  --font-size-h2:      2rem;       /* 32px               */
  --font-size-h3:      1.25rem;    /* 20px               */
  --font-size-accent:  0.8125rem;  /* 13px — accent label */
  --font-size-body:    1rem;       /* 16px               */
  --font-size-sm:      0.875rem;   /* 14px               */
  --font-size-caption: 0.75rem;    /* 12px               */

  /* Weights */
  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights */
  --line-height-display: 1.15;
  --line-height-heading: 1.25;
  --line-height-body:    1.7;

  /* Letter spacing */
  --letter-spacing-display: -0.5px;
  --letter-spacing-accent:   0.06em;
  --letter-spacing-wide:     0.08em;


  /* ── Spacing scale (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 */


  /* ── Border radius ────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;


  /* ── Transitions ──────────────────────────────────────────── */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.35s ease;


  /* ── Shadows ──────────────────────────────────────────────── */

  --shadow-sm: 0 1px 3px  rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);


  /* ── Layout ───────────────────────────────────────────────── */

  --container-max:   1200px;
  --container-pad-x: 1.5rem;
  --nav-height:      72px;
  --section-pad-y:   5rem;

}

/* Fluid type — shrink display heading at narrow viewports */
@media (max-width: 768px) {
  :root {
    --font-size-display: 2.25rem;   /* 36px */
    --font-size-h2:      1.625rem;  /* 26px */
    --section-pad-y:     3rem;
  }
}