/* Arena Rise — design tokens (mirrored from the Claude Design project 5702d4bd).
   Only change vs. the source: Tajawal is loaded from Google Fonts instead of
   self-hosted woff2, so this folder stays copy-paste portable. */

:root{
--ar-white:#FFFFFF;--ar-ink:#1D1D1B;--ar-black:#0B0B0A;
--ar-teal-50:#EEFAFA;--ar-teal-100:#D7F3F2;--ar-teal-200:#B0E7E6;--ar-teal-300:#87DAD9;--ar-teal-400:#45C3C2;--ar-teal-500:#2FADAC;--ar-teal-600:#1F8D8C;--ar-teal-700:#166A69;--ar-teal-800:#0F4948;--ar-teal-900:#0A2E2E;
--ar-n-0:#FFFFFF;--ar-n-25:#FCFCFB;--ar-n-50:#F7F7F5;--ar-n-100:#F0F0ED;--ar-n-200:#E3E2DE;--ar-n-300:#CBCAC5;--ar-n-400:#A5A49F;--ar-n-500:#7C7B76;--ar-n-600:#575651;--ar-n-700:#3B3A37;--ar-n-800:#26251F;--ar-n-900:#1D1D1B;--ar-n-950:#0B0B0A;
--ar-success:#3E8B63;--ar-warning:#B98A31;--ar-danger:#B0402F;--ar-info:#1F8D8C;

--brand-primary:var(--ar-teal-400);--brand-primary-strong:var(--ar-teal-600);--brand-ink:var(--ar-ink);
--text-strong:var(--ar-n-900);--text-body:var(--ar-n-700);--text-muted:var(--ar-n-500);--text-faint:var(--ar-n-400);--text-inverse:var(--ar-n-0);--text-accent:var(--ar-teal-600);--text-on-accent:var(--ar-ink);
--surface-page:var(--ar-n-0);--surface-subtle:var(--ar-n-50);--surface-card:var(--ar-n-0);--surface-sunken:var(--ar-n-100);--surface-accent-soft:var(--ar-teal-50);
--border-hairline:var(--ar-n-200);--border-default:var(--ar-n-300);--border-strong:var(--ar-n-900);--border-accent:var(--ar-teal-400);
--focus-ring:var(--ar-teal-500);

/* type */
/* Cairo — chosen over the logo file's Tajawal for a cleaner Arabic bowl, wider
   apertures at small sizes, and a full 200–1000 weight range, so every step of
   the scale below resolves to a real weight instead of a synthesised one.
   Tajawal stays as the fallback. To try another face, change these two lines
   and the Google Fonts <link> in index.html. */
--font-sans:'Cairo','Tajawal',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
--font-display:'Cairo','Tajawal',ui-sans-serif,system-ui,sans-serif;
--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-bold:700;--fw-heavy:800;--fw-black:900;
--fs-3xs:11px;--fs-2xs:12px;--fs-xs:13px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:21px;--fs-2xl:26px;--fs-3xl:32px;--fs-4xl:40px;--fs-5xl:52px;--fs-6xl:68px;--fs-7xl:88px;
--lh-tight:1.08;--lh-snug:1.22;--lh-normal:1.5;--lh-relaxed:1.75;
--ls-mega:.02em;--ls-display:.01em;--ls-normal:0;--ls-wide:.08em;--ls-wider:.18em;--ls-widest:.34em;
--type-display:var(--fw-heavy) var(--fs-6xl)/var(--lh-tight) var(--font-display);
--type-h1:var(--fw-bold) var(--fs-4xl)/var(--lh-snug) var(--font-display);
--type-h2:var(--fw-bold) var(--fs-3xl)/var(--lh-snug) var(--font-display);
--type-h3:var(--fw-medium) var(--fs-2xl)/var(--lh-snug) var(--font-sans);
--type-body:var(--fw-regular) var(--fs-md)/var(--lh-relaxed) var(--font-sans);
--type-body-sm:var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-sans);
--type-label:var(--fw-medium) var(--fs-2xs)/1.2 var(--font-sans);
--type-eyebrow:var(--fw-medium) var(--fs-2xs)/1.2 var(--font-sans);

/* space */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;--sp-40:160px;
--gutter:var(--sp-6);--section-y:var(--sp-32);--section-y-tight:var(--sp-20);
--container-max:1240px;--container-narrow:760px;--measure:66ch;

/* shape */
--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-pill:999px;
--radius-control:var(--radius-sm);--radius-card:var(--radius-md);--radius-surface:var(--radius-lg);
--shadow-xs:0 1px 2px rgba(29,29,27,.06);
--shadow-sm:0 2px 8px rgba(29,29,27,.06),0 1px 2px rgba(29,29,27,.04);
--shadow-md:0 12px 32px -12px rgba(29,29,27,.14),0 2px 6px rgba(29,29,27,.05);
--shadow-lg:0 32px 64px -24px rgba(29,29,27,.22),0 4px 12px rgba(29,29,27,.06);
--shadow-accent:0 16px 40px -18px rgba(69,195,194,.55);
--overlay-scrim:rgba(11,11,10,.62);
--blur-veil:saturate(140%) blur(18px);

/* motion */
--dur-instant:80ms;--dur-fast:160ms;--dur-base:240ms;--dur-slow:420ms;--dur-scene:720ms;
--ease-standard:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.6,0,.9,.4);
--motion-hover:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}

/* Dark theme — taken from the design system's own tokens/colors.css.
   The brand book reserves black for the website, so this is the identity's
   intended web surface, not an invention. site.css tints the surfaces toward
   the brand teal on top of these. */
[data-theme="dark"]{
/* tells the UA to render native controls dark too — date picker, select
   dropdown, scrollbars — otherwise they punch light holes in the theme */
color-scheme:dark;
--text-strong:#FFFFFF;--text-body:rgba(255,255,255,.78);--text-muted:rgba(255,255,255,.56);--text-faint:rgba(255,255,255,.38);--text-inverse:var(--ar-n-900);--text-accent:var(--ar-teal-300);
--surface-page:var(--ar-n-950);--surface-subtle:#111110;--surface-card:#141413;--surface-sunken:#0F0F0E;--surface-accent-soft:rgba(69,195,194,.10);
--border-hairline:rgba(255,255,255,.10);--border-default:rgba(255,255,255,.18);--border-strong:rgba(255,255,255,.42);--border-accent:var(--ar-teal-400);
}

@media (prefers-reduced-motion:reduce){
:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-scene:0ms}
}

/* base */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
h1{font:var(--type-h1);color:var(--text-strong)}
h2{font:var(--type-h2);color:var(--text-strong)}
h3{font:var(--type-h3);color:var(--text-strong)}
a{color:var(--text-accent);text-decoration:none;transition:var(--motion-hover)}
a:hover{color:var(--ar-teal-500)}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--ar-teal-200);color:var(--ar-ink)}
.ar-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-muted)}
.ar-num{font-variant-numeric:tabular-nums lining-nums}