/* UbiqAir — design tokens
   Single source of truth for colour, type, spacing, and motion.
   Palette taken from the logo (brand/logo.svg). */

:root {
  /* === Brand colour ============================================ */
  /* The six logo tile colours */
  --color-blue:        #1D62FC; /* Primary — wordmark, headings, buttons */
  --color-blue-deep:   #0E4AD6; /* Blue hover/active */
  --color-cyan:        #00C9FF;
  --color-sky:         #35A8E0;
  --color-green:       #2ED228;
  --color-orange:      #FF8600;
  --color-red:         #F60A11;

  --color-ink:         #14181F; /* Body text */
  --color-ink-mid:     #54595F; /* Secondary text */
  --color-ink-soft:    #8A9099; /* Captions, fine print */
  --color-mist:        #F3F7FF; /* Soft section background */
  --color-white:       #FFFFFF;
  --color-night:       #0B1D4A; /* Footer background */

  /* === Semantic roles ========================================== */
  --color-bg:           var(--color-white);
  --color-bg-soft:      var(--color-mist);
  --color-bg-card:      var(--color-white);
  --color-text:         var(--color-ink);
  --color-text-muted:   var(--color-ink-mid);
  --color-text-subtle:  var(--color-ink-soft);
  --color-heading:      var(--color-blue);
  --color-border:       rgba(29, 98, 252, 0.12);
  --color-border-hover: rgba(29, 98, 252, 0.28);
  --color-link:         var(--color-blue);
  --color-link-hover:   var(--color-blue-deep);

  /* === Typography ============================================== */
  --font-display: 'Lato', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans:    'Roboto', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif;

  /* Modular scale — ratio ~1.25 */
  --text-xs:   0.75rem;   /* 12px — fine print, captions       */
  --text-sm:   0.875rem;  /* 14px — small body, nav            */
  --text-base: 1rem;      /* 16px — default body               */
  --text-md:   1.125rem;  /* 18px — lead body                  */
  --text-lg:   1.5rem;    /* 24px — h3                         */
  --text-xl:   2.25rem;   /* 36px — h2                         */
  --text-2xl:  3rem;      /* 48px — h1                         */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;

  --tracking-tight:   -0.01em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.2em; /* eyebrow */

  /* === Spacing — base 8px ====================================== */
  --space-1:  0.25rem; /*   4 */
  --space-2:  0.5rem;  /*   8 */
  --space-3:  1rem;    /*  16 */
  --space-4:  1.5rem;  /*  24 */
  --space-5:  2rem;    /*  32 */
  --space-6:  3rem;    /*  48 */
  --space-7:  4rem;    /*  64 */
  --space-8:  6rem;    /*  96 */

  /* === Layout ================================================== */
  --content-max:    1160px;
  --content-narrow: 720px;
  --content-text:   62ch;

  /* === Borders & radius ======================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* === Motion ================================================== */
  --ease-out:       cubic-bezier(0.2, 0, 0, 1);
  --ease-out-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  360ms;

  /* === Shadows — blue-tinted to harmonize with palette ========= */
  --shadow-sm:    0 1px 3px rgba(11, 29, 74, 0.06), 0 1px 2px rgba(11, 29, 74, 0.04);
  --shadow-md:    0 4px 12px rgba(11, 29, 74, 0.08), 0 1px 3px rgba(11, 29, 74, 0.05);
  --shadow-lg:    0 12px 32px rgba(11, 29, 74, 0.10), 0 4px 8px rgba(11, 29, 74, 0.06);
  --shadow-hover: 0 8px 24px rgba(11, 29, 74, 0.12), 0 2px 6px rgba(11, 29, 74, 0.06);
}