/* =============================================================================
   Ovex Design System — tokens.

   Based on the supplied system, with five deliberate changes for this site,
   each marked ★ below. Everything else is the system as specified.

   ★ 1  One typeface. Manrope carries display, body and numerals.
   ★ 2  Tighter radii. The system's 34/44px squircles read playful at dashboard
        scale and soft at page scale; 16/20/26 keeps the family and sharpens it.
   ★ 3  Quieter elevation. Two-part shadows (a 1px contact shadow plus a wide,
        very light ambient one) and a hairline ring, instead of one broad blur.
   ★ 4  Warmer, lighter neutrals. The desk moves off pure grey.
   ★ 5  No blobs. The organic gradient shapes are removed entirely.
   ============================================================================= */

/* ★ 1 — one typeface. Manrope has no Arabic glyphs, so Arabic falls through to
   the reader's system Arabic face; Latin inside Arabic text stays Manrope. */
:root{
--font-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-numeric:"Manrope",system-ui,sans-serif;
--font-arabic:"Manrope","Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
}

:root{
/* --- base palette --- */
--lime-100:#F2FCCE;--lime-200:#E7F9A8;--lime-300:#DDF77E;--lime-400:#D2F44F;--lime-500:#C5EE2E;--lime-600:#A8CE1C;--lime-700:#7E9B14;
--orange-100:#FDEDE3;--orange-200:#FBD9C6;--orange-300:#F7B693;--orange-400:#F49664;--orange-500:#F07B3F;--orange-600:#DD6428;--orange-700:#B24B18;
/* ★ 4 — a touch warmer and a step lighter at the top of the ramp */
--ink-900:#0B0B0A;--ink-800:#171715;--ink-700:#282826;--ink-600:#454542;--ink-500:#6B6B66;--ink-400:#9B9B94;--ink-300:#C7C7C0;--ink-200:#E5E5DF;--ink-100:#EFEFE9;--ink-050:#F7F7F3;
--white:#FFFFFF;--canvas:#E8E8E3;--shell:#FAFAF7;

/* --- semantic surfaces --- */
--surface-canvas:var(--canvas);
--surface-shell:var(--shell);
--surface-card:var(--white);
--surface-card-alt:var(--ink-050);
--surface-inverse:var(--ink-900);
--surface-lime:var(--lime-300);
--surface-lime-soft:var(--lime-100);
--surface-orange:var(--orange-500);
--surface-orange-soft:var(--orange-100);
--surface-field:var(--white);

/* --- semantic text --- */
--text-strong:var(--ink-900);
--text-body:var(--ink-800);
--text-muted:var(--ink-400);
--text-subtle:var(--ink-500);
--text-on-inverse:var(--white);
--text-on-lime:var(--ink-900);
--text-on-orange:var(--white);

/* --- lines & accents --- */
--line-soft:var(--ink-200);
--line-strong:var(--ink-900);
--line-dashed:var(--ink-300);
--accent-primary:var(--lime-400);
--accent-secondary:var(--orange-500);
--focus-ring:var(--lime-500);

/* --- status --- */
--status-positive:var(--lime-600);
--status-attention:var(--orange-500);
--status-neutral:var(--ink-400);
--status-critical:#D9412F;

--sheen-card:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6));
}

/* ★ 1 — the scale, set for one face. Tighter than the system's dashboard scale,
   because a marketing page is read at arm's length rather than filled with widgets. */
:root{
--fs-hero:clamp(38px,5vw,60px);
--fs-display-1:clamp(30px,3.4vw,40px);
--fs-display-2:30px;--fs-h1:25px;--fs-h2:20px;--fs-h3:17px;
--fs-body-lg:15px;--fs-body:14px;--fs-body-sm:13px;--fs-label:12px;--fs-micro:10px;
--lh-tight:1.04;--lh-snug:1.22;--lh-normal:1.5;--lh-loose:1.62;
--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;
--ls-tight:-0.02em;--ls-normal:0;--ls-wide:0.02em;--ls-caps:0.06em;
--type-display:var(--fw-bold) var(--fs-display-1)/var(--lh-tight) var(--font-display);
--type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display);
--type-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body);
--type-label:var(--fw-semibold) var(--fs-label)/1.2 var(--font-body);
}

/* ★ 2 — the system's 4px base, kept. The working rhythm drops from 20px to 14px,
   and one section-height token replaces the hand-picked 72px. */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:52px;--sp-10:64px;
--section-y:clamp(40px,5vw,68px);
--gutter-card:14px;--gutter-grid:12px;--pad-card:18px;--pad-card-lg:22px;--pad-field:13px;
--size-control-sm:30px;--size-control-md:38px;--size-control-lg:46px;--size-rail:76px;--size-avatar:40px;
--r-xs:6px;--r-sm:9px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:26px;--r-pill:999px;--r-shell:22px;
}

/* ★ 3 — contact shadow + wide ambient, and a hairline ring that sits with them */
:root{
--shadow-none:none;
--shadow-xs:0 1px 1px rgba(11,11,10,.05);
--shadow-sm:0 1px 2px rgba(11,11,10,.05),0 2px 6px -2px rgba(11,11,10,.06);
--shadow-card:0 1px 2px rgba(11,11,10,.04),0 10px 26px -14px rgba(11,11,10,.14);
--shadow-lift:0 2px 4px rgba(11,11,10,.05),0 20px 44px -20px rgba(11,11,10,.22);
--shadow-pill:0 1px 2px rgba(11,11,10,.10);
--shadow-inset-soft:inset 0 0 0 1px rgba(11,11,10,.05);
--ring-ghost:inset 0 0 0 1px var(--line-soft);
--ring-hair:inset 0 0 0 1px rgba(11,11,10,.06);
--ring-ink:inset 0 0 0 1.5px var(--ink-900);
--border-hair:1px solid var(--line-soft);
--border-ink:1.5px solid var(--ink-900);
--border-dashed:1px dashed var(--line-dashed);
--blur-glass:blur(14px);
--glass:rgba(250,250,247,.78);
}

:root{
--dur-instant:90ms;--dur-fast:160ms;--dur-base:260ms;--dur-slow:420ms;
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-in-out:cubic-bezier(.65,0,.35,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--t-hover:all var(--dur-fast) var(--ease-out);
--t-press:transform var(--dur-instant) var(--ease-out);
--t-panel:all var(--dur-base) var(--ease-spring);
}
@keyframes lum-pop{0%{transform:scale(.88);opacity:0}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes lum-rise{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes lum-fill{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes lum-pulse-ring{0%{box-shadow:0 0 0 0 rgba(197,238,46,.5)}100%{box-shadow:0 0 0 12px rgba(197,238,46,0)}}
@keyframes lum-spin{to{transform:rotate(360deg)}}

/* Arabic: same face where it can be, the system's Arabic where it can't. */
:root:lang(ar){
--font-display:var(--font-arabic);
--font-body:var(--font-arabic);
--font-numeric:"Manrope",system-ui,sans-serif;
--ls-tight:0;
--lh-tight:1.2;
--lh-snug:1.34;
--lh-normal:1.68;
}