2026-09-11 02:46:56 +02:00
|
|
|
/* ============================================================================
|
|
|
|
|
TIER 1 - PRIMITIVES
|
|
|
|
|
----------------------------------------------------------------------------
|
|
|
|
|
Raw values only. No meaning, no roles, no component names.
|
|
|
|
|
"green-600", never "accent". "neutral-800", never "page-background".
|
|
|
|
|
|
|
|
|
|
Nothing in app/ may reference these directly except app/styles/semantic.css
|
|
|
|
|
and app/styles/typography.css. Components use TIER 2 (semantic.css).
|
|
|
|
|
|
|
|
|
|
Values sourced from the published Figma variables of
|
|
|
|
|
file yvKHp3Ha2rQmv9kt9tCC7j - the hexes marked [figma] are exact; the
|
|
|
|
|
surrounding ramp steps are derived from them (tint = mix with white,
|
|
|
|
|
shade = multiply toward black).
|
|
|
|
|
========================================================================= */
|
|
|
|
|
|
|
|
|
|
@theme static {
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
COLOUR - base
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--color-white: #ffffff; /* [figma] base/white */
|
|
|
|
|
--color-black: #000000; /* [figma] base/black */
|
|
|
|
|
--color-transparent: transparent;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
COLOUR - neutral ramp (built around the brand Dark Grey #1d1d1b)
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--color-neutral-50: #f8f9fa; /* [figma] text/primary on dark */
|
|
|
|
|
--color-neutral-100: #e8e8e8; /* [figma] stroke/subtle */
|
|
|
|
|
--color-neutral-200: #d6d6d4;
|
|
|
|
|
--color-neutral-300: #c2c2c0; /* [figma] text/secondary */
|
|
|
|
|
--color-neutral-400: #949492; /* [figma] text/tertiary */
|
|
|
|
|
--color-neutral-500: #5c565c; /* [figma] base/grey-500 */
|
|
|
|
|
--color-neutral-600: #454543;
|
|
|
|
|
--color-neutral-700: #2e2e2c;
|
|
|
|
|
--color-neutral-800: #1d1d1b; /* [figma] Neutral Black/800 - brand Dark Grey */
|
2026-09-16 20:32:56 +02:00
|
|
|
--color-neutral-850: #141413; /* the design drafts' footer / raised panel */
|
2026-09-11 02:46:56 +02:00
|
|
|
--color-neutral-900: #0b0b0a; /* [figma] Neutral Black/900 */
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
COLOUR - green ramp (brand Dark Turquoise #008764)
|
|
|
|
|
600 is the brand colour. 700 is the Figma button hover shade.
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--color-green-50: #f0f8f5;
|
|
|
|
|
--color-green-100: #dbeee9;
|
|
|
|
|
--color-green-200: #b3dbd1;
|
|
|
|
|
--color-green-300: #85c5b5;
|
|
|
|
|
--color-green-400: #4daa93; /* [figma] brand Green/400 - primary button disabled fill */
|
|
|
|
|
--color-green-500: #26997b;
|
|
|
|
|
--color-green-600: #008764; /* [figma] background/accent, interactive/primary, text/accent */
|
|
|
|
|
--color-green-700: #006b4f; /* [figma] base/turquoise-dark, interactive/primary-hover */
|
|
|
|
|
--color-green-800: #00563f;
|
|
|
|
|
--color-green-900: #00402f;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
COLOUR - red ramp (brand Red #dd322f)
|
|
|
|
|
500 is the brand colour. 600/700 are derived press states.
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--color-red-50: #fdf3f3;
|
|
|
|
|
--color-red-100: #fae2e2;
|
|
|
|
|
--color-red-200: #f5c2c1;
|
|
|
|
|
--color-red-300: #ef9d9b;
|
|
|
|
|
--color-red-400: #e76b69;
|
|
|
|
|
--color-red-500: #dd322f; /* [figma] interactive/danger, base/red */
|
|
|
|
|
--color-red-600: #c02c29;
|
|
|
|
|
--color-red-700: #a42523;
|
|
|
|
|
--color-red-800: #851e1c;
|
|
|
|
|
--color-red-900: #631715;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
COLOUR - alpha steps (translucent overlays, hairlines, scrims)
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--color-white-a04: rgb(255 255 255 / 0.04);
|
|
|
|
|
--color-white-a08: rgb(255 255 255 / 0.08);
|
|
|
|
|
--color-white-a12: rgb(255 255 255 / 0.12);
|
|
|
|
|
--color-white-a16: rgb(255 255 255 / 0.16);
|
|
|
|
|
--color-white-a24: rgb(255 255 255 / 0.24);
|
|
|
|
|
--color-white-a40: rgb(255 255 255 / 0.4);
|
|
|
|
|
--color-white-a64: rgb(255 255 255 / 0.64);
|
|
|
|
|
|
|
|
|
|
--color-black-a04: rgb(0 0 0 / 0.04);
|
|
|
|
|
--color-black-a08: rgb(0 0 0 / 0.08);
|
|
|
|
|
--color-black-a12: rgb(0 0 0 / 0.12);
|
|
|
|
|
--color-black-a16: rgb(0 0 0 / 0.16);
|
2026-09-14 12:38:05 +02:00
|
|
|
--color-black-a20: rgb(0 0 0 / 0.2); /* [figma] hero picture shade */
|
2026-09-11 02:46:56 +02:00
|
|
|
--color-black-a24: rgb(0 0 0 / 0.24);
|
|
|
|
|
--color-black-a40: rgb(0 0 0 / 0.4);
|
|
|
|
|
--color-black-a56: rgb(0 0 0 / 0.56);
|
|
|
|
|
--color-black-a72: rgb(0 0 0 / 0.72);
|
|
|
|
|
|
2026-09-14 12:38:05 +02:00
|
|
|
/* The pale mint tint the home hero washes its picture with - green-200,
|
|
|
|
|
not the brand green-600 the --color-green-a* steps below carry. */
|
|
|
|
|
--color-green-200-a12: rgb(179 219 209 / 0.12);
|
|
|
|
|
|
2026-09-11 02:46:56 +02:00
|
|
|
--color-green-a12: rgb(0 135 100 / 0.12);
|
|
|
|
|
--color-green-a16: rgb(0 135 100 / 0.16);
|
|
|
|
|
--color-green-a24: rgb(0 135 100 / 0.24);
|
|
|
|
|
--color-green-a40: rgb(0 135 100 / 0.4);
|
|
|
|
|
|
|
|
|
|
--color-red-a12: rgb(221 50 47 / 0.12);
|
|
|
|
|
--color-red-a16: rgb(221 50 47 / 0.16);
|
|
|
|
|
--color-red-a24: rgb(221 50 47 / 0.24);
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
TYPEFACES
|
|
|
|
|
Panton (EN) and Montserrat Arabic (AR) are the licensed brand faces,
|
|
|
|
|
licensed into the repo - the first family in each stack is the real
|
|
|
|
|
one, everything after it is the free fallback that ships today.
|
|
|
|
|
@font-face declarations live in typography.css.
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--font-en: "Panton", "Figtree", ui-sans-serif, system-ui, -apple-system,
|
|
|
|
|
"Segoe UI", Roboto, sans-serif;
|
|
|
|
|
--font-ar: "Montserrat Arabic", "IBM Plex Sans Arabic",
|
|
|
|
|
"Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
|
|
|
|
|
--font-sans: var(--font-en);
|
|
|
|
|
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
|
|
|
"Liberation Mono", monospace;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
FONT SIZE ramp (px in the comment, rem in the value)
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--text-xs: 0.75rem; /* 12 - [figma] Label/Medium */
|
|
|
|
|
--text-sm: 0.875rem; /* 14 - [figma] Body/Small */
|
|
|
|
|
--text-md: 1rem; /* 16 - [figma] Body/Medium Bold */
|
|
|
|
|
--text-lg: 1.125rem; /* 18 - [figma] Body/Large Bold */
|
|
|
|
|
--text-xl: 1.375rem; /* 22 */
|
|
|
|
|
--text-2xl: 1.75rem; /* 28 - [figma] Heading/H2 */
|
|
|
|
|
--text-3xl: 2.25rem; /* 36 */
|
|
|
|
|
--text-4xl: 2.75rem; /* 44 - [figma] Display/Small */
|
|
|
|
|
--text-5xl: 3.5rem; /* 56 */
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
LINE HEIGHT ramp - fixed steps, named after their px value / 4
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--leading-4: 1rem; /* 16 */
|
|
|
|
|
--leading-5: 1.25rem; /* 20 */
|
|
|
|
|
--leading-6: 1.5rem; /* 24 */
|
|
|
|
|
--leading-7: 1.75rem; /* 28 */
|
|
|
|
|
--leading-8: 1.875rem; /* 30 */
|
|
|
|
|
--leading-9: 2.25rem; /* 36 */
|
|
|
|
|
--leading-10: 2.75rem; /* 44 */
|
|
|
|
|
--leading-11: 3.25rem; /* 52 */
|
|
|
|
|
--leading-12: 4rem; /* 64 */
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
LETTER SPACING ramp
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--tracking-tighter: -1px; /* [figma] Display/Small */
|
|
|
|
|
--tracking-tight: -0.6px;
|
|
|
|
|
--tracking-snug: -0.3px; /* [figma] Heading/H2 */
|
|
|
|
|
--tracking-normal: 0px;
|
|
|
|
|
--tracking-wide: 0.5px; /* [figma] Label/Medium */
|
|
|
|
|
--tracking-wider: 1px;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
FONT WEIGHT ramp
|
|
|
|
|
Panton "SemiBold" is published at weight 500 in the Figma library,
|
|
|
|
|
which is why medium is 500 and semibold is 600.
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--font-weight-regular: 400;
|
|
|
|
|
--font-weight-medium: 500; /* [figma] Label/Medium */
|
|
|
|
|
--font-weight-semibold: 600;
|
|
|
|
|
--font-weight-bold: 700; /* [figma] every Bold role */
|
|
|
|
|
--font-weight-black: 900;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
SPACING ramp
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--spacing: 0.25rem; /* base unit for p-1, gap-2, ... */
|
|
|
|
|
--spacing-2xs: 0.25rem; /* 4 */
|
|
|
|
|
--spacing-xs: 0.5rem; /* 8 - [figma] space/xs */
|
|
|
|
|
--spacing-sm: 0.75rem; /* 12 - [figma] space/sm */
|
|
|
|
|
--spacing-md: 1rem; /* 16 - [figma] space/md */
|
|
|
|
|
--spacing-lg: 1.5rem; /* 24 - [figma] space/lg */
|
|
|
|
|
--spacing-xl: 2rem; /* 32 */
|
|
|
|
|
--spacing-2xl: 3rem; /* 48 */
|
|
|
|
|
--spacing-3xl: 4rem; /* 64 */
|
|
|
|
|
--spacing-4xl: 6rem; /* 96 */
|
|
|
|
|
--spacing-5xl: 8rem; /* 128 */
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
RADIUS ramp
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--radius-none: 0px;
|
|
|
|
|
--radius-xs: 2px;
|
|
|
|
|
--radius-sm: 4px; /* [figma] radius/sm */
|
|
|
|
|
--radius-md: 8px; /* [figma] radius/md */
|
|
|
|
|
--radius-lg: 12px;
|
|
|
|
|
--radius-xl: 16px;
|
|
|
|
|
--radius-2xl: 24px;
|
|
|
|
|
--radius-full: 9999px;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
BORDER WIDTH ramp
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--border-width-sm: 1px;
|
|
|
|
|
--border-width-md: 1.5px; /* [figma] secondary button stroke */
|
|
|
|
|
--border-width-lg: 2px;
|
|
|
|
|
--border-width-xl: 3px;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
OPACITY ramp
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--opacity-0: 0;
|
|
|
|
|
--opacity-8: 0.08;
|
|
|
|
|
--opacity-16: 0.16;
|
|
|
|
|
--opacity-40: 0.4; /* [figma] every disabled button */
|
2026-09-14 12:38:05 +02:00
|
|
|
--opacity-50: 0.5; /* [figma] launch strip, flanking photos */
|
2026-09-11 02:46:56 +02:00
|
|
|
--opacity-64: 0.64;
|
|
|
|
|
--opacity-100: 1;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
SHADOW ramp
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.06);
|
|
|
|
|
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.08);
|
|
|
|
|
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.08);
|
|
|
|
|
--shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.18), 0 4px 8px -4px rgb(0 0 0 / 0.1);
|
|
|
|
|
--shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.28);
|
|
|
|
|
--shadow-none: 0 0 #0000;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
DURATION ramp
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--duration-instant: 0ms;
|
|
|
|
|
--duration-fast: 120ms;
|
|
|
|
|
--duration-base: 200ms;
|
|
|
|
|
--duration-slow: 320ms;
|
|
|
|
|
--duration-slower: 520ms;
|
2026-09-16 20:32:56 +02:00
|
|
|
--duration-slowest: 800ms;
|
2026-09-11 02:46:56 +02:00
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
EASING ramp
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
|
--ease-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
|
|
|
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
|
|
|
|
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
Z-INDEX ladder - raw ordinals, semantic layer names live in tier 2
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--z-0: 0;
|
|
|
|
|
--z-10: 10;
|
|
|
|
|
--z-20: 20;
|
|
|
|
|
--z-30: 30;
|
|
|
|
|
--z-40: 40;
|
|
|
|
|
--z-50: 50;
|
|
|
|
|
--z-60: 60;
|
|
|
|
|
--z-70: 70;
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------
|
|
|
|
|
CONTAINER widths
|
|
|
|
|
-------------------------------------------------------------------- */
|
|
|
|
|
--container-prose: 68ch;
|
|
|
|
|
--container-content: 80rem; /* 1280 */
|
|
|
|
|
--container-wide: 90rem; /* 1440 */
|
|
|
|
|
}
|
