/* ==========================================================================
   FahsLink brand tokens
   Shared by the landing page and the sign-in page.

   THIS IS THE ONE PLACE TO CHANGE THE LOOK. Colours, fonts, corner rounding
   and animation speed all live here, so "make it warmer", "use a different
   accent colour" or "slow the animations down" is a change to this file and
   nothing else.
   ========================================================================== */
:root{
  /* -- palette ------------------------------------------------------------ */
  --bg:            #070A0F;   /* page background            */
  --bg-2:          #0B111A;   /* alternating section band   */
  --surface:       #0E151F;   /* cards                      */
  --surface-2:     #131C28;   /* raised cards               */
  --line:          #1E2A38;   /* borders                    */
  --line-soft:     #16202C;

  --text:          #EAF2FB;   /* headings / primary text    */
  --muted:         #8FA3B8;   /* body copy                  */
  --dim:           #62748A;   /* captions                   */

  --accent:        #2DD4BF;   /* brand accent (teal)        */
  --accent-2:      #38BDF8;   /* gradient partner (sky)     */
  --accent-ink:    #04231F;   /* text on accent buttons     */
  --gold:          #FBBF24;   /* highlight / popular badge  */

  /* App-facing accents. The workspace has a light mode where the bright teal
     above does not carry enough contrast on white, so it gets a deeper pair.
     Both sit on the same hue as the landing page, so the product reads as one
     thing whichever surface you are on. */
  --accent-on-light:      #14B8A6;   /* fills on a light surface   */
  --accent-on-light-ink:  #0F766E;   /* text/icons on a light surface */

  /* inspection semantics - deliberately separate from the brand accent so a
     "good/attention/bad" colour never collides with a button colour */
  --good:          #34D399;
  --warn:          #FBBF24;
  --bad:           #F87171;

  /* -- type --------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-ar:      'Tajawal', system-ui, sans-serif;

  /* -- shape & motion ----------------------------------------------------- */
  --radius:        18px;
  --radius-lg:     26px;
  --maxw:          1180px;   /* body content measure   */
  --maxw-nav:      1560px;   /* top bar sits wider than the body content */
  --pad-nav:       clamp(16px, 2.4vw, 30px);
  --pad:           clamp(20px, 5vw, 40px);
  --reveal-time:   .75s;      /* scroll-reveal duration      */
  --reveal-shift:  26px;      /* how far elements travel in  */
  --ease:          cubic-bezier(.22,.61,.36,1);
}

/* Arabic swaps the font stack; everything else is shared. */
html[lang="ar"]{ --font-display: var(--font-ar); --font-body: var(--font-ar); }