/* ============================================================================= pn-tokens.css Token bridge for privatenotaryindubai.ae. WHAT THIS FILE IS FOR --------------------- `pn-patterns.css` reads token names in the shape --pn-color-*, --pn-space-*, --pn-text-*. The design system in 04-content-plan/design-system.md publishes token names in the shape --pn-navy, --pn-surface, --sp-*. This file maps one onto the other, in one place, so neither side has to be rewritten. Every declaration below is `var(--their-name, their-published-value)`. That means it works two ways: - If the design system's own token block is loaded, these inherit its live values, and changing a colour there changes it here. - If it is not loaded yet, the fallback is the design system's published value anyway, so the site already looks correct. Either way nothing depends on stylesheet load order, and there is no second place where a hex code is written down. WHAT NOT TO DO HERE ------------------- Do not define --pn-text, --pn-surface, --pn-border, --pn-navy, --pn-font-body or any other name the design system owns. Redefining one of those would silently clobber the design system for the whole site. This file only ever reads them. The two colour systems underneath, for reference: GeneratePress 3.6.1 globals, from the theme's inc/defaults.php: --contrast --contrast-2 --contrast-3 --base --base-2 --base-3 --accent Design system semantic tokens, from design-system.md: --pn-text --pn-text-2 --pn-text-muted --pn-border --pn-border-strong --pn-surface --pn-surface-alt --pn-surface-tint --pn-navy --pn-navy-hover --pn-note --pn-note-bg --pn-focus --pn-text-invert ============================================================================= */ :root { /* --------------------------------------------------------------------- Colour --------------------------------------------------------------------- */ --pn-color-primary: var(--pn-navy, #14456F); --pn-color-primary-hover: var(--pn-navy-hover, #0F2C48); --pn-color-on-primary: var(--pn-text-invert, #FFFFFF); --pn-color-text: var(--pn-text, #111C2B); --pn-color-text-2: var(--pn-text-2, #3F4C5C); --pn-color-text-muted: var(--pn-text-muted, #5C6875); --pn-color-surface: var(--pn-surface, #FFFFFF); --pn-color-surface-alt: var(--pn-surface-alt, #F6F7F9); --pn-color-surface-sunken: var(--pn-surface-tint, #EAF0F6); --pn-color-border: var(--pn-border, #DDE3EA); --pn-color-border-strong: var(--pn-border-strong, #6E7D8F); --pn-color-focus: var(--pn-focus, #14456F); /* The "this is a government fee, not ours" note. Never the only signal, always paired with the words themselves. */ --pn-color-note: var(--pn-note, #7A5200); --pn-color-note-surface: var(--pn-note-bg, #FBF2DF); /* --------------------------------------------------------------------- Spacing Mapped by intent, not by number. The design system's --sp-5 is 20px and this file's --pn-space-5 is 24px, so they are matched to the step that does the same job, not to the one with the same digit. --------------------------------------------------------------------- */ --pn-space-1: var(--sp-1, 0.25rem); /* 4px */ --pn-space-2: var(--sp-2, 0.5rem); /* 8px */ --pn-space-3: var(--sp-3, 0.75rem); /* 12px */ --pn-space-4: var(--sp-4, 1rem); /* 16px */ --pn-space-5: var(--sp-6, 1.5rem); /* 24px, card padding and grid gap, mobile */ --pn-space-6: var(--sp-7, 2rem); /* 32px, card padding and grid gap, desktop */ --pn-space-7: var(--sp-9, 3rem); /* 48px, section padding, mobile */ --pn-space-8: var(--sp-10, 4rem); /* 64px, gap between major blocks */ /* Section rhythm and box padding. */ --pn-section-block: var(--pn-section-y, clamp(3rem, 1.929rem + 4.762vw, 5.5rem)); --pn-box-inline: var(--sp-6, 1.5rem); --pn-box-block: var(--sp-6, 1.5rem); /* --------------------------------------------------------------------- Typography Sizes mirror the design system's heading scale exactly, so a pattern heading and a plain page heading of the same level are the same size. No @font-face and no Google Fonts link anywhere in this theme. The design system's stacks are system fonts, which cost zero requests, zero layout shift, and render Arabic correctly in phase 2. --------------------------------------------------------------------- */ --pn-font-heading: var(--pn-font-display, Georgia, "Times New Roman", "Noto Serif", serif); --pn-text-sm: clamp(0.9375rem, 0.902rem + 0.159vw, 1rem); --pn-text-base: clamp(1rem, 0.964rem + 0.159vw, 1.0625rem); --pn-text-lg: clamp(1.125rem, 1.045rem + 0.357vw, 1.3125rem); /* h4 */ --pn-text-xl: clamp(1.25rem, 1.089rem + 0.714vw, 1.625rem); /* h3 */ --pn-text-2xl: clamp(1.5rem, 1.232rem + 1.19vw, 2.125rem); /* h2 */ --pn-text-3xl: clamp(2rem, 1.571rem + 1.905vw, 3rem); /* h1 */ --pn-leading-tight: 1.15; --pn-leading-snug: 1.3; --pn-leading-normal: 1.65; --pn-weight-normal: 400; --pn-weight-medium: 500; --pn-weight-bold: 600; /* Reading measure. The design system publishes three, by content type. */ --pn-measure: var(--pn-measure-prose, 70ch); --pn-measure-lead: var(--pn-measure-lede, 52ch); /* Letter spacing for small uppercase labels. Zeroed for Arabic in pn-patterns.css, because tracking breaks Arabic letter joining. */ --pn-tracking-label: 0.06em; /* --------------------------------------------------------------------- Shape and depth 4, 6 and 8 match the radii used throughout the design system. --------------------------------------------------------------------- */ --pn-radius-sm: 4px; --pn-radius-md: 6px; --pn-radius-lg: 8px; --pn-border-width: 1px; --pn-border-width-strong: 2px; --pn-shadow-sm: 0 1px 2px rgba(17, 28, 43, 0.05), 0 1px 3px rgba(17, 28, 43, 0.07); /* --------------------------------------------------------------------- Interaction --------------------------------------------------------------------- */ /* The design system's focus ring is a double ring: a 2px ring in the surface colour, then a 3px ring in the focus colour. The inner ring guarantees the outer one is measured against a known background, so the contrast holds even over a photograph the client uploaded. */ --pn-focus-ring: 0 0 0 2px var(--pn-color-surface), 0 0 0 5px var(--pn-color-focus); --pn-focus-radius: 4px; /* WCAG 2.2 SC 2.5.8 Target Size (Minimum) is 24 by 24 CSS pixels. The design system sets buttons at 48px, which clears it four times over and suits a stressed thumb. */ --pn-target-min: 48px; --pn-transition: 150ms ease; }