/* ==========================================================================
   tokens.css — the single source of design tokens for mouazalsabbagh.com
   Loaded FIRST on every page. Every other stylesheet reads these values;
   older token names (--primary, --lime, --hf-lime, …) now point here.
   Source of values: Figma "2010 - 2026 Portfolio" (J3Y9lEJVB9Ug2U8dugvccR).
   ========================================================================== */
:root {
  /* Brand */
  --color-brand: #82FF00;              /* Figma chartreuse-green/50 */
  --color-brand-rgb: 130, 255, 0;      /* for rgba(var(--color-brand-rgb), a) */
  --color-brand-hover: #B9FF3D;
  --color-on-brand: #070707;           /* text/icons on the green */

  /* Surfaces (dark → light) */
  --color-black: #000000;
  --color-ink: #070707;
  --color-coal: #0F0E0E;
  --color-bg-deep: #0D1117;
  --color-panel: #101316;
  --color-bg: #161B22;                 /* page background */
  --color-surface: #1F1F1F;            /* cards */
  --color-surface-raised: #1E242C;
  --color-surface-hover: #282828;

  /* Text */
  --color-text: #FFFFFF;
  --color-text-soft: #F2F3F5;
  --color-text-muted: rgba(255, 255, 255, 0.65);
  --color-text-faint: rgba(242, 243, 245, 0.40);
  --color-text-dim: #757575;           /* Figma grey labels on the home page */

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-grey-300: #CDCDCD;
  --color-grey-400: #BDBDBD;
  --color-grey-450: #B0AFAF;
  --color-grey-500: #A0A0A0;
  --color-grey-600: #888686;
  --color-grey-700: #555555;
  --color-grey-800: #3E3E3E;
  --color-grey-900: #1A1A1A;
  --color-grey-925: #171717;
  --color-grey-950: #131313;

  /* Feedback */
  --color-error: #FF8A7A;
  --color-error-soft: #FF9393;
  --color-success: #0FCD81;

  /* Lines */
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.22);

  /* Type */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;

  /* Type scale (px). Every fixed font-size on the site uses one of these. */
  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;  --fs-15: 15px;  --fs-16: 16px;
  --fs-17: 17px;  --fs-18: 18px;  --fs-20: 20px;  --fs-22: 22px;  --fs-24: 24px;
  --fs-26: 26px;  --fs-28: 28px;  --fs-30: 30px;  --fs-35: 35px;  --fs-40: 40px;
  --fs-45: 45px;  --fs-50: 50px;  --fs-56: 56px;  --fs-64: 64px;  --fs-70: 70px;
  --fs-82: 82px;  --fs-90: 90px;
  /* Display sizes (hero and big ticker type from Figma) */
  --fs-100: 100px; --fs-120: 120px; --fs-140: 140px; --fs-150: 150px; --fs-164: 164px; --fs-200: 200px;
  /* Fluid sizes (generated pages): scale with the viewport between a min and max */
  --fs-fluid-2xl: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
  --fs-fluid-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --fs-fluid-mast: clamp(3.5rem, 1.2rem + 9vw, 9rem);
  --fs-fluid-cs-title: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);   /* case-study titles */
  --fs-fluid-cs-head: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);  /* case-study section heads */

  /* Header bar height: 92px desktop and 1024, 86px tablet (768–991), 68px phone */
  --header-h: 92px;

  /* Radius */
  --radius-xs: 4px;
  --radius-img: 6px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-btn: 15px;                  /* Figma Send button 798:77725 */
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: .2s;
  --dur-base: .3s;
  --dur-slow: .5s;

  /* Focus */
  --focus-ring: 2px solid var(--color-brand);
  --focus-offset: 3px;
}

/* Header heights per Figma /en/ frames: 1024+ uses the desktop bar (92px, agreed 13 Oct;
   Figma still shows 100px), 768 frame = 86px, 390 frame = 68px. */
@media (max-width: 991.98px) { :root { --header-h: 86px; } }
@media (max-width: 767.98px) { :root { --header-h: 68px; } }

/* Breakpoints (CSS can't use variables in media queries, so these are the agreed values).
   Every media query on the site uses one of these 8 boundaries:
     376   small phones (<376)
     480   large phones
     576   phablet          (Figma 390 frame sits in 376–479)
     768   tablet           (Figma 768 frame)
     992   small laptop
     1025  desktop nav      (Figma 1024 frame is ≤1024: collapsed menu)
     1200  desktop
     1400  wide             (Figma 1440 / 1920 frames)
   Write max-width as boundary − 0.02 (e.g. max-width: 767.98px), min-width as the boundary. */