/* ==========================================================================
   NOMU — Design tokens
   Every colour, font and size on the site comes from here.
   Change a value once and it updates everywhere.
   Source: NOMU Brand Guidelines 2026 (04 Color, 05 Typography).
   ========================================================================== */

:root {
  /* ---- Brand colours ---------------------------------------------------- */
  --violet:        #6C4DFF; /* Main brand colour: buttons, links, the dot   */
  --violet-deep:   #5538E0; /* Hover, shapes on violet                      */
  --midnight:      #14142B; /* Text, dark sections, footer                  */
  --midnight-deep: #0F0E21; /* Deepest dark ground (as in the social posts) */
  --yellow:        #FFD84D; /* Spark Yellow: small highlights only          */
  --coral:         #FF7A59; /* Small secondary accents only                 */
  --lavender:      #F6F4FF; /* Light section backgrounds                    */
  --paper:         #FBFAFF; /* Soft paper white: the main ground            */
  --white:         #FFFFFF;

  /* ---- Roles (use these in components, not the raw colours) ------------ */
  --ground:        var(--paper);
  --ink:           var(--midnight);
  --ink-muted:     #55557A;              /* secondary notes only */
  --ink-on-dark:   #FFFFFF;
  --muted-on-dark: #A9A8C9;
  --accent:        var(--violet);
  --accent-hover:  var(--violet-deep);
  --hairline:      rgba(20, 20, 43, 0.12);
  --hairline-dark: rgba(255, 255, 255, 0.12);
  --ring:          var(--violet);

  /* ---- Typefaces --------------------------------------------------------- */
  --font-display: "Poppins", system-ui, sans-serif;  /* 200 + 800, 600 buttons */
  --font-text:    "DM Sans", system-ui, sans-serif;  /* 400 body, 700 labels    */
  --font-arabic:  "Cairo", "Noto Kufi Arabic", sans-serif;

  /* ---- Type scale (fluid: min, preferred, max) -------------------------- */
  --size-hero:    clamp(3.1rem, 11.2vw, 9.6rem);
  --size-h2:      clamp(2.4rem, 6.4vw, 5.6rem);
  --size-h3:      clamp(1.5rem, 2.6vw, 2.25rem);
  --size-lead:    clamp(1.15rem, 1.6vw, 1.45rem);
  --size-body:    1.0625rem;
  --size-small:   0.875rem;
  --size-label:   0.78rem;

  /* ---- Space ------------------------------------------------------------- */
  --gutter:        clamp(20px, 5vw, 88px);
  --max-width:     1440px;
  --section-gap:   clamp(88px, 11vw, 168px);
  --radius-pill:   999px;
  --radius-frame:  20px;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      180ms;
  --dur-base:      420ms;
  --dur-slow:      900ms;
}