/* SDM colour system. Four primaries are the ONLY brand colours (Brand Guidelines 2.01).
   Neutrals are navy-tinted greys; functional colours are an intentional digital-UI extension. */
:root{
/* --- Brand primaries --- */
--sdm-navy:#001E61;      /* PANTONE 2758 C */
--sdm-blue:#0071CE;      /* PANTONE 285 C  */
--sdm-turquoise:#1ECAD3; /* PANTONE 319 C  */
--sdm-violet:#655DC6;    /* PANTONE 2725 C */

/* --- Navy ramp --- */
--navy-50:#F2F5FA;--navy-100:#E1E8F3;--navy-200:#C2CDE3;--navy-300:#8C9CC1;--navy-400:#4A5F94;--navy-500:#1A356F;--navy-600:#001E61;--navy-700:#001A52;--navy-800:#001440;--navy-900:#000D2B;

/* --- Blue ramp --- */
--blue-50:#EBF5FE;--blue-100:#D6EAFD;--blue-200:#A6D2F7;--blue-300:#66B2EE;--blue-400:#2A8FE0;--blue-500:#0071CE;--blue-600:#005CA8;--blue-700:#004681;--blue-800:#00335E;

/* --- Turquoise ramp (600+ only for text on light) --- */
--turquoise-50:#EBFBFC;--turquoise-100:#D2F6F8;--turquoise-200:#A5EDF0;--turquoise-300:#63DDE3;--turquoise-400:#1ECAD3;--turquoise-500:#14A8B0;--turquoise-600:#0F868D;--turquoise-700:#0B666B;

/* --- Violet ramp --- */
--violet-50:#F0EFFA;--violet-100:#E2E0F5;--violet-200:#C5C1EB;--violet-300:#9B95DA;--violet-400:#655DC6;--violet-500:#514AA6;--violet-600:#3E3982;--violet-700:#2C285E;

/* --- Neutrals --- */
--white:#FFFFFF;
--neutral-25:#FBFCFE;--neutral-50:#F7F8FB;--neutral-100:#EEF0F5;--neutral-150:#E5E7EE;--neutral-200:#E3E6EE;--neutral-300:#C9CEDC;--neutral-400:#9AA2B8;--neutral-500:#6B7490;--neutral-600:#474F68;--neutral-700:#2A3049;--neutral-800:#181D30;--neutral-900:#0B0F1C;

/* --- Functional (UI extension, not brand colours) --- */
--success:#0F868D;--success-bg:#EBFBFC;
--warning:#B26B00;--warning-bg:#FDF4E7;
--danger:#B3261E;--danger-bg:#FDEDEC;
--info:var(--blue-500);--info-bg:var(--blue-50);

/* --- Semantic surfaces --- */
--surface-page:#FFFFFF;
--surface-subtle:var(--neutral-50);
--surface-card:#FFFFFF;
--surface-sunken:var(--neutral-100);
--surface-inverse:var(--sdm-navy);
--surface-brand:var(--sdm-blue);
--surface-icon-circle:var(--neutral-150);

/* --- Semantic text --- */
--text-heading:var(--sdm-navy);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-inverse:#FFFFFF;
--text-inverse-muted:rgba(255,255,255,.72);
--text-link:var(--sdm-blue);
--text-link-hover:var(--navy-600);
--text-on-brand:#FFFFFF;

/* --- Semantic borders --- */
--border-subtle:var(--neutral-200);
--border-default:var(--neutral-300);
--border-strong:var(--navy-300);
--border-inverse:rgba(255,255,255,.24);
--focus-ring:var(--sdm-blue);

/* --- Gradients (digital applications only) --- */
/* The official SDM gradient: violet to blue, horizontal. Measured from approved artwork. */
--gradient-brand:linear-gradient(90deg,#655DC6 0%,#0271CE 100%); /* @kind color */
--gradient-brand-duotone:linear-gradient(100deg,#655DC6 0%,#4A7ACD 34%,#0090D2 68%,#1ECAD3 100%); /* @kind color */
--gradient-navy-blue:linear-gradient(135deg,#001E61 0%,#0071CE 100%); /* @kind color */
--gradient-blue-turquoise:linear-gradient(135deg,#0071CE 0%,#1ECAD3 100%); /* @kind color */
--gradient-violet-blue:linear-gradient(135deg,#655DC6 0%,#0071CE 100%); /* @kind color */
--gradient-navy-deep:linear-gradient(160deg,#00133F 0%,#001E61 55%,#0B2E86 100%); /* @kind color */
--gradient-violet-turquoise:linear-gradient(100deg,#655DC6 0%,#1ECAD3 100%); /* @kind color */
/* Polygon field — the signature SDM background texture (low-poly triangulated mesh) */
--field-polygon-a:url("../assets/brand/gradient-polygon-a.png"); /* @kind other */
--field-polygon-b:url("../assets/brand/gradient-polygon-b.png"); /* @kind other */
--field-polygon-nodes:url("../assets/brand/gradient-polygon-nodes.png"); /* @kind other */
--field-smooth:url("../assets/brand/gradient-smooth.png"); /* @kind other */
--field-smooth-speckle:url("../assets/brand/gradient-smooth-speckle.png"); /* @kind other */
--field-orbit-navy:url("../assets/brand/orbit-arcs-navy.png"); /* @kind other */
--field-nebula:url("../assets/brand/nebula-navy.png"); /* @kind other */
--field-mesh-smooth:url("../assets/brand/gradient-mesh-smooth.png"); /* @kind other */
--gradient-mesh:url("../assets/brand/sdm-gradient.png"); /* @kind other */
--gradient-retina:url("../assets/brand/gradient-retina-duotone.png"); /* @kind other */
--gradient-hairline:linear-gradient(90deg,#1ECAD3 0%,#0071CE 50%,#655DC6 100%); /* @kind color */
}
:root{
--font-sans:"Somar","Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
--font-arabic:"Somar","Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

--fw-thin:100; /* @kind font */
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-extrabold:800; /* @kind font */
--fw-black:900; /* @kind font */

/* Type scale — 1.25 major third, 16px base */
--fs-display-xl:72px;--fs-display:56px;--fs-h1:44px;--fs-h2:34px;--fs-h3:26px;--fs-h4:21px;--fs-lg:18px;--fs-body:16px;--fs-sm:14px;--fs-xs:13px;--fs-micro:12px;

--lh-tight:1.08; /* @kind other */
--lh-heading:1.18; /* @kind other */
--lh-snug:1.35; /* @kind other */
--lh-body:1.6; /* @kind other */
--lh-relaxed:1.75; /* @kind other */
/* Arabic needs more leading than Latin */
--lh-body-ar:1.85; /* @kind other */
--lh-heading-ar:1.4; /* @kind other */

--ls-display:-0.02em; /* @kind other */
--ls-heading:-0.01em; /* @kind other */
--ls-body:0; /* @kind other */
--ls-caps:0.14em; /* @kind other */

/* Semantic roles */
--text-display-weight:var(--fw-bold); /* @kind font */
--text-heading-weight:var(--fw-semibold); /* @kind font */
--text-body-weight:var(--fw-regular); /* @kind font */
--text-emphasis-weight:var(--fw-medium); /* @kind font */
}
:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;

--gutter:24px;
--container-sm:640px;--container-md:880px;--container-lg:1120px;--container-xl:1280px;
--section-y:96px;--section-y-compact:64px;
/* Brandmark clear space = X, the height of the monogram circle */
--logo-clear-space:1em; /* @kind spacing */
--logo-min-width:40px;
}
:root{
--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;--radius-circle:50%;
--radius-card:var(--radius-lg);
--radius-control:var(--radius-md);
--radius-button:var(--radius-pill);
--border-width:1px;--border-width-strong:2px; /* @kind spacing */
}
:root{
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-orbit:cubic-bezier(.42,0,.58,1); /* @kind other */
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:360ms; /* @kind other */
--dur-slower:600ms; /* @kind other */
--dur-orbit:24s; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-slower:0ms; /* @kind other */
--dur-orbit:0s; /* @kind other */
}}
:root{
/* Navy-tinted, low-contrast. SDM is a flat brand — shadows lift, they never dramatise. */
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(0,30,97,.06);
--shadow-sm:0 1px 3px rgba(0,30,97,.08),0 1px 2px rgba(0,30,97,.04);
--shadow-md:0 4px 12px rgba(0,30,97,.08),0 1px 3px rgba(0,30,97,.05);
--shadow-lg:0 12px 32px rgba(0,30,97,.10),0 2px 6px rgba(0,30,97,.05);
--shadow-xl:0 24px 64px rgba(0,30,97,.14);
--shadow-focus:0 0 0 3px rgba(0,113,206,.28);
--shadow-inset-hairline:inset 0 -1px 0 var(--border-subtle);
--overlay-scrim:rgba(0,19,63,.56); /* @kind color */
--blur-glass:saturate(140%) blur(14px); /* @kind other */
--glass-fill:rgba(255,255,255,.72); /* @kind color */
--glass-fill-inverse:rgba(0,30,97,.44); /* @kind color */
}