/* ============================================================================ 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 */ --color-neutral-850: #141413; /* the design drafts' footer / raised panel */ --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); --color-black-a20: rgb(0 0 0 / 0.2); /* [figma] hero picture shade */ --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); /* 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); --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 */ --opacity-50: 0.5; /* [figma] launch strip, flanking photos */ --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; --duration-slowest: 800ms; /* -------------------------------------------------------------------- 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 */ }