/* ==========================================================================
   Zenix Academy — design tokens
   Colours are lifted from the shipped apps so the site cannot drift from them:
     Desktop  Desktop/app/src/renderer/styles/globals.css  (light block)
     Android  ui/theme/Color.kt                            (LightZenixColors)
   Light theme only. There is deliberately no dark palette here.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --accent:        #0b777c;              /* desktop --a1 : fills, large type */
  --accent-deep:   #075b60;              /* desktop --a2 : gradient end      */
  --accent-ink:    #075b60;              /* 6.4:1 on white — REQUIRED for any
                                            body-size teal text or link.
                                            --accent is ~4.4:1, large only.  */
  --accent-soft:   rgba(11, 119, 124, .10);
  --accent-softer: rgba(11, 119, 124, .05);
  --accent-line:   rgba(11, 119, 124, .22);
  --petrol:        #44666b;              /* desktop --side-bg                */
  --petrol-deep:   #2d4d52;

  /* --- ink --------------------------------------------------------------- */
  --ink:       #0b2b31;
  --ink-soft:  #526b70;
  --ink-mute:  #879ba0;
  --on-dark:   #edf5f5;
  --on-dark-soft: rgba(237, 245, 245, .74);

  /* --- surfaces ---------------------------------------------------------- */
  --paper:     #f5f9fa;
  --surface:   #ffffff;
  --surface-2: #eef5f5;
  --rule:        #dde8ea;
  --rule-strong: #cddde0;

  /* --- gradients --------------------------------------------------------- */
  --accent-grad: linear-gradient(150deg, #0b777c, #075b60);
  --hero-grad:   linear-gradient(120deg, #315e64 0%, #18383d 72%, #0d2024 100%);
  --sheen:       linear-gradient(100deg, #0b777c 0%, #22a3a1 45%, #075b60 100%);

  /* --- elevation --------------------------------------------------------- */
  --shadow-sm: 0 2px 8px -4px rgba(15, 42, 47, .18);
  --shadow:    0 12px 26px -18px rgba(15, 42, 47, .24);
  --shadow-lg: 0 34px 64px -40px rgba(15, 42, 47, .40);
  --glow:      0 18px 40px -22px rgba(11, 119, 124, .58);

  /* --- radii ------------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  /* --- type -------------------------------------------------------------- */
  --font-sans:     'Tajawal', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --font-wordmark: 'Montserrat', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;

  /* Arabic reads ~10-15% larger than Latin at the same nominal size, so the
     base is 18px rather than 16px and leading is looser. */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.125rem;
  --fs-lg:   clamp(1.1875rem, 1.06rem + 0.55vw, 1.4375rem);
  --fs-xl:   clamp(1.375rem, 1.16rem + 0.95vw, 1.75rem);
  --fs-2xl:  clamp(1.625rem, 1.29rem + 1.5vw, 2.25rem);
  --fs-3xl:  clamp(2rem, 1.5rem + 2.3vw, 3rem);
  --fs-4xl:  clamp(2.375rem, 1.6rem + 3.4vw, 3.875rem);

  --lh-tight: 1.35;   /* display / headings — Arabic needs more than Latin */
  --lh-body:  1.85;   /* body copy */

  /* --- layout ------------------------------------------------------------ */
  --page:     1200px;
  --page-pad: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --header-h: 72px;

  /* --- motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    160ms;
  --t-med:     280ms;
  --t-slow:    620ms;
}