/* =============================================================================
   Albasrawie — Design tokens
   Colours, type, spacing, motion and layout variables (light + dark).
   ========================================================================== */

/* =========================================================
   1. DESIGN TOKENS
   Albasrawie brand values below are PLACEHOLDERS derived from a neutral
   research palette. Replace the colour tokens with the official brand values.
   ========================================================= */
:root{
  /* colour — light */
  --paper:#FAFBFC; --paper-2:#F2F5F8;
  --band:#F1F4F8;                 /* soft section background (class .band) */
  --ink:#0D1B2A; --ink-2:#3B495B; --muted:#66748A;
  --line:#E1E6EC; --line-strong:#CBD3DD; --soft:#EEF1F5; --soft-2:#E4E9EF;
  --accent:#0E6B66;
  --btn-bg:#0D1B2A; --btn-bg-hover:#1E3148; --btn-fg:#FFFFFF;
  --tint-1:#DDEBE8; --tint-2:#D8E0F4; --tint-3:#EFE7D3; --tint-4:#E6DEF0;
  --dot-a:#0E8C83; --dot-b:#2B4FD8; --dot-c:#C98A1B;
  --dark:#0A121C; --dark-2:#111C2A; --dark-line:#1F2C3B;
  --dark-fg:#EAF0F6; --dark-muted:#95A3B6;
  --veil:rgba(250,251,252,.6); --scrim:rgba(9,16,26,.34);

  /* type */
  --font:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif:'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --fs-display:clamp(2.4rem, 1.1rem + 4.7vw, 5.5rem);
  --fs-h2:clamp(1.9rem, 1.1rem + 2.4vw, 3.4rem);
  --fs-h3:clamp(1.55rem, 1.1rem + 1.4vw, 2.5rem);
  --fs-statement:clamp(1.65rem, 1rem + 2.3vw, 3.25rem);
  --fs-body:1.0625rem; --fs-small:.875rem;

  /* layout */
  --container:82rem;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --header-h:4.5rem;
  --sub-h:2.75rem;                                   /* second header row (always visible) */
  --hdr-total:calc(var(--header-h) + var(--sub-h));  /* everything pinned sits below this */
  --section-y:clamp(4.5rem, 9vw, 9rem);
  --gap:clamp(1.25rem, 2.6vw, 2.5rem);

  /* shape */
  --r-btn:.625rem; --r-pill:999px; --r-card:1.125rem; --r-panel:1.75rem;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-1:.18s; --dur-2:.32s; --dur-3:.6s; --dur-4:1s;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A121C; --paper-2:#0F1926;
    --band:#0F1926;
    --ink:#EAF0F6; --ink-2:#B9C5D4; --muted:#8B9AAE;
    --line:#1E2B3B; --line-strong:#2E3E52; --soft:#142131; --soft-2:#1B2B3F;
    --accent:#4FC3B8;
    --btn-bg:#EAF0F6; --btn-bg-hover:#FFFFFF; --btn-fg:#0A121C;
    --tint-1:#12302F; --tint-2:#16264A; --tint-3:#33291A; --tint-4:#2A2140;
    --dot-a:#4FC3B8; --dot-b:#8AA3FF; --dot-c:#E0A93B;
    --dark:#04080E; --dark-2:#0B1420;
    --veil:rgba(10,18,28,.6); --scrim:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#0A121C; --paper-2:#0F1926;
    --band:#0F1926;
  --ink:#EAF0F6; --ink-2:#B9C5D4; --muted:#8B9AAE;
  --line:#1E2B3B; --line-strong:#2E3E52; --soft:#142131; --soft-2:#1B2B3F;
  --accent:#4FC3B8;
  --btn-bg:#EAF0F6; --btn-bg-hover:#FFFFFF; --btn-fg:#0A121C;
  --tint-1:#12302F; --tint-2:#16264A; --tint-3:#33291A; --tint-4:#2A2140;
  --dot-a:#4FC3B8; --dot-b:#8AA3FF; --dot-c:#E0A93B;
  --dark:#04080E; --dark-2:#0B1420;
  --veil:rgba(10,18,28,.6); --scrim:rgba(0,0,0,.5);
}

/* header height steps with the viewport class */
@media (max-width:1099.98px){:root{--header-h:4rem}}
@media (max-width:559.98px){:root{--header-h:3.5rem;--sub-h:2.5rem}}
/* very large screens scale the whole rem system so proportions stay controlled */
/* laptops show the site at 75%, the size most people zoom to; wider desktop screens step up to full size; phones and tablets keep full size */
@media (min-width:900px){html{font-size:75%}}
@media (min-width:1600px){html{font-size:87.5%}}
@media (min-width:1800px){html{font-size:100%}}