/* ==========================================================================
   Abdullah Aqrabawi — Design System · Tokens
   Source of truth for colours, type, spacing and motion.
   Values are taken from innovinto.digital (reference viewport 1920px) and
   expressed as fluid clamp() so they scale down to mobile.
   ========================================================================== */

:root {
  /* ---- Colour channels: each colour is set once here, as r, g, b ---- */
  --c-navy-rgb: 10, 14, 23; /* #0a0e17 */
  --c-slate-rgb: 32, 38, 52; /* #202634 */
  --c-light-rgb: 230, 232, 239; /* #e6e8ef */
  --c-muted-rgb: 122, 124, 134; /* #7a7c86 */
  --c-muted-ink-rgb: 100, 102, 111; /* #64666f, the muted grey for text on light grounds (4.5:1 on #e6e8ef) */
  --c-white-rgb: 255, 255, 255; /* #ffffff */
  --c-black-rgb: 0, 0, 0; /* #000000 */
  --c-accent-rgb: 129, 57, 255; /* #8139ff */
  --c-accent-2-rgb: 75, 120, 237; /* #4b78ed */
  --c-navy-2-rgb: 16, 21, 31; /* #10151f */
  --c-navy-3-rgb: 23, 29, 42; /* #171d2a */
  --c-light-2-rgb: 242, 243, 246; /* #f2f3f6 */
  --c-accent-hover-rgb: 109, 43, 224; /* #6d2be0 */

  /* ---- Brand colours ------------------------------------------------- */
  --c-navy:    rgb(var(--c-navy-rgb));   /* main dark background, body text on light   */
  --c-slate:   rgb(var(--c-slate-rgb));   /* footer bar                                 */
  --c-light:   rgb(var(--c-light-rgb));   /* light sections, text on dark               */
  --c-muted:   rgb(var(--c-muted-rgb));   /* secondary text, rules, inactive words      */
  --c-white:   rgb(var(--c-white-rgb));
  --c-black:   rgb(var(--c-black-rgb));
  --c-accent:  rgb(var(--c-accent-rgb));   /* purple — rotating headline, focus, hover   */
  --c-accent-2:rgb(var(--c-accent-2-rgb));   /* blue — only inside gradients               */

  /* ---- Derived colours ----------------------------------------------- */
  --c-navy-2:  rgb(var(--c-navy-2-rgb));   /* raised surface on dark                     */
  --c-navy-3:  rgb(var(--c-navy-3-rgb));   /* hover surface on dark                      */
  --c-light-2: rgb(var(--c-light-2-rgb));   /* raised surface on light                    */
  --c-accent-hover: rgb(var(--c-accent-hover-rgb));
  --c-accent-soft: rgba(var(--c-accent-rgb), .12);
  --grad-brand: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
  --grad-text:  linear-gradient(90deg, #b08bff 0%, #7aa0ff 100%);
  --overlay-top:    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 100%);
  --overlay-bottom: linear-gradient(0deg,   rgba(0,0,0,.44) 0%, rgba(0,0,0,0) 100%);
  --overlay-hero:   linear-gradient(180deg, rgba(10,14,23,.15) 0%, rgba(10,14,23,.55) 100%);

  /* ---- Typography ---------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* fluid sizes: min / preferred (vw of 1920 reference) / max           */
  --fs-display-xl: clamp(3.25rem, 9vw,    10.8rem);  /* 172.8px  giant words   */
  --fs-display-lg: clamp(2.5rem,  6vw,     7.2rem);  /* 115.2px  rotator, stats */
  --fs-display-md: clamp(2.5rem,  6.25vw,  7.5rem);  /* 120px    Let's Connect */
  --fs-h1:         clamp(2rem,    3.65vw,  4.375rem);/* 70px     hero, statement */
  --fs-h2:         clamp(1.5rem,  2.2vw,   2.625rem);/* 42px     page titles   */
  --fs-h3:         clamp(1.375rem,1.67vw,  2rem);    /* 32px     card titles   */
  --fs-h4:         1.5rem;    /* 24px  stat labels        */
  --fs-body-lg:    1.25rem;   /* 20px  lead paragraphs    */
  --fs-nav:        1.125rem;  /* 18px  nav, text buttons  */
  --fs-body:       1rem;      /* 16px  body, eyebrows     */
  --fs-small:      .875rem;   /* 14px  captions           */

  --lh-tight: 1;
  --lh-display: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.4;
  --lh-relaxed: 1.5;

  --ls-caps: .06em;

  /* ---- Spacing ------------------------------------------------------- */
  --sp-1: .25rem;   /* 4  */
  --sp-2: .5rem;    /* 8  */
  --sp-3: .75rem;   /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-7: 1.875rem; /* 30 */
  --sp-8: 2.5rem;   /* 40 */
  --sp-9: 3.75rem;  /* 60 */
  --sp-10: 5rem;    /* 80 */
  --sp-11: 7.5rem;  /* 120 */

  --gutter:    clamp(1rem, 1.56vw, 1.875rem);   /* 30px page gutter        */
  --gutter-lg: clamp(1.25rem, 4.17vw, 5rem);    /* 80px inset for lists    */
  --section-y: clamp(3.75rem, 5vw, 6rem);       /* 60–96px section padding */
  --grid-gap:  clamp(1.25rem, 3.4vw, 4rem);     /* 65px card gap           */
  --header-h:  100px;
  --container-max: none;     /* no cap: every page and the header run to the gutter */

  /* ---- Shape & lines ------------------------------------------------- */
  --radius-0: 0;       /* the brand uses sharp corners                   */
  --radius-sm: 4px;    /* inputs only                                    */
  --radius-arrow: 20px;/* carousel arrow buttons                         */
  --radius-pill: 999px;
  --line-w: 1px;

  /* ---- Motion -------------------------------------------------------- */
  --dur-fast: .2s;
  --dur: .35s;
  --dur-slow: .7s;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --rotator-interval: 2600ms;

  /* ---- Layers -------------------------------------------------------- */
  --z-header: 50;
  --z-overlay: 40;

  /* ---- Asset sizes (from the live site) ----------------------------- */
  --logo-w: 160px;
  --logo-h: 41px;
  --brand-logo-w: 149px;   /* employer / client logos */
  --brand-logo-h: 45px;
  --tool-logo-w: 170px;
  --tool-logo-h: 75px;
  --cert-w: 348px;
  --cert-h: 269px;
  --avatar: 42px;
}

/* ==========================================================================
   Theme scopes — every section declares one. Components only read the
   generic variables below, never the brand colours directly.
   ========================================================================== */
.theme-dark {
  --c-muted: rgb(var(--c-muted-rgb));
  --bg: var(--c-navy);
  --bg-raised: var(--c-navy-2);
  --bg-hover: var(--c-navy-3);
  --fg: var(--c-light);
  --fg-strong: var(--c-white);
  --fg-muted: var(--c-muted);
  --fg-inactive: rgba(var(--c-light-rgb), .28);
  --line: var(--c-muted);
  --line-soft: rgba(var(--c-light-rgb), .14);
  --accent: var(--c-accent);
  --accent-fg: var(--c-white);
  --logo-filter: none;
  color-scheme: dark;
}
.theme-light {
  --c-muted: rgb(var(--c-muted-ink-rgb));
  --bg: var(--c-light);
  --bg-raised: var(--c-white);
  --bg-hover: var(--c-light-2);
  --fg: var(--c-navy);
  --fg-strong: var(--c-navy);
  --fg-muted: var(--c-muted);
  --fg-inactive: rgba(var(--c-navy-rgb), .28);
  --line: rgb(var(--c-muted-rgb));
  --line-soft: rgba(var(--c-navy-rgb), .12);
  --accent: var(--c-accent);
  --accent-fg: var(--c-white);
  --logo-filter: invert(1) brightness(.1);
  color-scheme: light;
}
.theme-slate {
  --c-muted: rgb(var(--c-muted-rgb));
  --bg: var(--c-slate);
  --bg-raised: #2a3140;
  --bg-hover: #323a4a;
  --fg: var(--c-light);
  --fg-strong: var(--c-white);
  --fg-muted: #a9acb8;
  --fg-inactive: rgba(var(--c-light-rgb), .28);
  --line: rgba(var(--c-light-rgb), .2);
  --line-soft: rgba(var(--c-light-rgb), .12);
  --accent: var(--c-accent);
  --accent-fg: var(--c-white);
  --logo-filter: none;
  color-scheme: dark;
}
.theme-dark, .theme-light, .theme-slate {
  background: var(--bg);
  color: var(--fg);
}
.theme-white {
  --c-muted: rgb(var(--c-muted-ink-rgb));
  --bg: var(--c-white);
  --bg-raised: var(--c-light-2);
  --bg-hover: var(--c-light);
  --fg: var(--c-navy);
  --fg-strong: var(--c-navy);
  --fg-muted: var(--c-muted);
  --fg-inactive: rgba(var(--c-navy-rgb), .28);
  --line: rgb(var(--c-muted-rgb));
  --line-soft: rgba(var(--c-navy-rgb), .12);
  --accent: var(--c-accent);
  --accent-fg: var(--c-white);
  --logo-filter: invert(1) brightness(.1);
  color-scheme: light;
  background: var(--bg);
  color: var(--fg);
}