/* ============================================================================ NEO& DESIGN TOKENS The single source of truth for every design value on neoand.com. Three tiers, per current design-system practice: 1 REFERENCE raw values, no meaning --neo-purple-600 2 SEMANTIC meaning, points at reference --action-primary 3 COMPONENT scoped, only where needed --btn-height RULES - Nothing outside this file states a design value. Stylesheets, page CSS and documents reference a token; they never restate a number or a hex. - Never use a reference token directly in a rule. Use the semantic token. --neo-purple-600 in a button rule is a defect; --action-primary is correct. - Adding a value means adding a token here first. ANCHORS 1440 desktop · 768 tablet · 390 mobile VERIFY AT 1920 desktop · 360 mobile (no horizontal scroll) ============================================================================ */ :root { /* ═══════════════════════════════════════════════════════════ TIER 1 · REFERENCE — raw values, no meaning attached ═══════════════════════════════════════════════════════════ */ /* -- palette ------------------------------------------------ */ --neo-purple-700: #442aa9; --neo-purple-600: #5d3fd3; --neo-purple-100: #f0ecfc; --neo-plum-900: #251b3c; --neo-plum-800: #352949; --neo-plum-600: #514762; --neo-plum-400: #716381; --neo-gold-600: #b19063; --neo-gold-800: #795b33; --neo-gold-200: #d2b691; --neo-ink-900: #292433; --neo-ink-600: #625d6e; --neo-ink-200: #e3e0e9; --neo-ink-100: #f6f5f8; --neo-white: #ffffff; --neo-lilac-300: #c0b3e6; --neo-lilac-200: #cdbdf5; /* -- type ---------------------------------------------------- */ --neo-font-latin: 'Space Grotesk', Arial, sans-serif; --neo-font-arabic: 'Alexandria', Arial, sans-serif; --neo-font-mono: ui-monospace, Menlo, Consolas, monospace; --neo-weight-light: 300; --neo-weight-regular: 400; --neo-weight-medium: 500; --neo-weight-semi: 600; --neo-weight-bold: 700; /* -- the fluid scale ---------------------------------------- Every step interpolates between the 390 and 1440 anchors, so a value is correct at every width rather than jumping at a breakpoint. Neither anchor is the design; both are. */ --neo-size-3xl: clamp(2.50rem, 1.62rem + 3.61vw, 3.60rem); --neo-size-2xl: clamp(1.90rem, 1.30rem + 2.46vw, 2.65rem); --neo-size-xl: clamp(1.45rem, 1.13rem + 1.31vw, 1.85rem); --neo-size-lg: clamp(1.15rem, 1.03rem + 0.49vw, 1.30rem); --neo-size-md: 1rem; --neo-size-sm: 0.875rem; --neo-size-xs: 0.75rem; --neo-leading-tight: 1.15; --neo-leading-heading: 1.25; --neo-leading-body: 1.65; --neo-leading-loose: 1.9; --neo-tracking-tight: -0.035em; --neo-tracking-normal: 0; --neo-tracking-wide: 0.1em; /* -- space -------------------------------------------------- A single scale. Values between steps are not used. */ --neo-space-3xs: 4px; --neo-space-2xs: 8px; --neo-space-xs: 12px; --neo-space-sm: 16px; --neo-space-md: 24px; --neo-space-lg: 32px; --neo-space-xl: 46px; --neo-space-2xl: 74px; --neo-space-3xl: 110px; /* -- geometry ------------------------------------------------ */ --neo-radius-sm: 4px; --neo-radius-md: 8px; --neo-radius-lg: 10px; --neo-radius-full: 999px; --neo-border-hair: 1px; --neo-border-thick: 2px; --neo-border-focus: 3px; --neo-shadow-card: 0 12px 34px rgba(37, 27, 60, .035); --neo-shadow-lift: 0 -6px 24px rgba(37, 27, 60, .18); --neo-duration: 160ms; /* -- layout -------------------------------------------------- */ --neo-container-max: 1200px; --neo-gutter-desktop: 80px; --neo-gutter-tablet: 48px; --neo-gutter-mobile: 36px; --neo-grid-columns: 12; --neo-grid-gap: var(--neo-space-md); --neo-measure: 68ch; --neo-card-min: 320px; /* -- targets — WCAG 2.2 SC 2.5.8 is 24px; these exceed it ----- */ --neo-target-min: 44px; --neo-target-action: 48px; /* ═══════════════════════════════════════════════════════════ TIER 2 · SEMANTIC — meaning. Use these, never tier 1. ═══════════════════════════════════════════════════════════ */ /* -- surfaces ------------------------------------------------ */ --surface-page: var(--neo-white); --surface-sunken: var(--neo-ink-100); --surface-raised: var(--neo-white); --surface-inverse: var(--neo-plum-900); --surface-inverse-2: var(--neo-plum-800); --surface-accent: var(--neo-purple-100); /* -- text ---------------------------------------------------- */ --text-primary: var(--neo-ink-900); --text-secondary: var(--neo-ink-600); --text-heading: var(--neo-plum-900); --text-inverse: var(--neo-white); --text-inverse-2: #d1c8df; --text-accent: var(--neo-purple-700); --text-eyebrow: var(--neo-gold-800); /* -- lines --------------------------------------------------- */ --border-subtle: var(--neo-ink-200); --border-strong: var(--neo-plum-400); --border-inverse: var(--neo-plum-600); /* -- action -------------------------------------------------- */ --action-primary: var(--neo-purple-600); --action-primary-hover: var(--neo-purple-700); --action-on-primary: var(--neo-white); --action-secondary-bg: var(--neo-white); --action-secondary-fg: var(--neo-plum-900); /* -- state --------------------------------------------------- */ --state-active: var(--neo-purple-600); --state-focus: var(--neo-gold-600); --state-disabled: var(--neo-ink-600); --state-error: var(--neo-gold-800); /* -- gold. Four permitted uses, and no others ---------------- */ --accent-eyebrow: var(--neo-gold-800); --accent-final-tier:var(--neo-gold-600); --accent-chart-target: var(--neo-gold-600); --accent-focus-ring: var(--neo-gold-600); /* -- the three Loop stages ----------------------------------- */ --stage-model: var(--neo-purple-600); --stage-execute: var(--neo-lilac-300); --stage-measure: var(--neo-gold-200); /* -- data visualization -------------------------------------- */ --data-actual: var(--neo-purple-600); --data-forecast: var(--neo-purple-600); --data-range: rgba(93, 63, 211, .14); --data-range-edge: var(--neo-lilac-200); --data-target: var(--neo-gold-600); --data-grid: #e8e4ed; --data-axis: var(--neo-ink-600); --data-projection: var(--neo-lilac-300); --data-plot-bg: #f8f6fd; /* -- type roles ---------------------------------------------- */ --type-page-title: var(--neo-size-3xl); --type-section-title: var(--neo-size-2xl); --type-subsection: var(--neo-size-xl); --type-card-title: var(--neo-size-lg); --type-body: var(--neo-size-md); --type-support: var(--neo-size-sm); --type-label: var(--neo-size-xs); /* -- space roles --------------------------------------------- */ --space-section: var(--neo-space-2xl); --space-section-tight:var(--neo-space-xl); --space-block: var(--neo-space-lg); --space-card: var(--neo-space-md); --space-stack: var(--neo-space-sm); --space-inline: var(--neo-space-xs); /* ═══════════════════════════════════════════════════════════ TIER 3 · COMPONENT — only where a component needs its own ═══════════════════════════════════════════════════════════ */ --btn-height: var(--neo-target-action); --btn-padding: 11px 22px; --btn-radius: var(--neo-radius-sm); --input-height: var(--neo-target-action); --card-padding: var(--neo-space-md); --card-radius: var(--neo-radius-md); --panel-radius: var(--neo-radius-lg); --header-height: 76px; --header-height-sm: 66px; --portrait-max: 240px; --badge-size: 96px; --mark-slot-width: 116px; --icon-size: 24px; --icon-stroke: 1.5px; /* Native controls follow the OS unless the visitor has chosen. Left at "light dark", the browser paints an unstyled input to the OS preference and ignores our choice, which is how the notify field rendered black on a light page. It is narrowed to the chosen theme below. */ color-scheme: light dark; } /* ============================================================================ DARK APPEARANCE A second set of semantic values, not a second stylesheet. Tier 1 is unchanged; only the meanings move. Every component follows automatically. ============================================================================ */ /* dark by system, and by explicit choice */ @media (prefers-color-scheme: dark){ html:not([data-theme]){ --surface-page: #17131f; --surface-sunken: #1e1929; --surface-raised: #221c2e; --surface-inverse: #0f0c15; --surface-inverse-2: #1a1524; --surface-accent: #2a2140; --text-primary: #ece9f2; --text-secondary: #a79fb5; --text-heading: #f5f3f8; --text-inverse: #f5f3f8; --text-inverse-2: #b9b0c7; --text-accent: #b9a3f5; --text-eyebrow: #d2b691; --border-subtle: #322a42; --border-strong: #4b4060; --border-inverse: #3a3149; --action-primary: #7d61e8; --action-primary-hover: #9a83f0; --action-on-primary: #100d17; --action-secondary-bg: transparent; --action-secondary-fg: #ece9f2; --state-active: #9a83f0; --state-focus: #d2b691; --state-disabled: #6b6379; --state-error: #d2b691; --accent-eyebrow: #d2b691; --accent-final-tier: #d2b691; --accent-chart-target: #d2b691; --accent-focus-ring: #d2b691; --stage-model: #9a83f0; --stage-execute: #7f6fb8; --stage-measure: #d2b691; --data-actual: #9a83f0; --data-forecast: #9a83f0; --data-range: rgba(154, 131, 240, .18); --data-range-edge: #6d5aa8; --data-target: #d2b691; --data-grid: #2e2740; --data-axis: #a79fb5; --data-projection: #5b4d86; --data-plot-bg: #1c1727; --neo-shadow-card: 0 12px 34px rgba(0, 0, 0, .35); --neo-shadow-lift: 0 -6px 24px rgba(0, 0, 0, .45); } } [data-theme="dark"]{ --surface-page: #17131f; --surface-sunken: #1e1929; --surface-raised: #221c2e; --surface-inverse: #0f0c15; --surface-inverse-2: #1a1524; --surface-accent: #2a2140; --text-primary: #ece9f2; --text-secondary: #a79fb5; --text-heading: #f5f3f8; --text-inverse: #f5f3f8; --text-inverse-2: #b9b0c7; --text-accent: #b9a3f5; --text-eyebrow: #d2b691; --border-subtle: #322a42; --border-strong: #4b4060; --border-inverse: #3a3149; --action-primary: #7d61e8; --action-primary-hover: #9a83f0; --action-on-primary: #100d17; --action-secondary-bg: transparent; --action-secondary-fg: #ece9f2; --state-active: #9a83f0; --state-focus: #d2b691; --state-disabled: #6b6379; --state-error: #d2b691; --accent-eyebrow: #d2b691; --accent-final-tier: #d2b691; --accent-chart-target: #d2b691; --accent-focus-ring: #d2b691; --stage-model: #9a83f0; --stage-execute: #7f6fb8; --stage-measure: #d2b691; --data-actual: #9a83f0; --data-forecast: #9a83f0; --data-range: rgba(154, 131, 240, .18); --data-range-edge: #6d5aa8; --data-target: #d2b691; --data-grid: #2e2740; --data-axis: #a79fb5; --data-projection: #5b4d86; --data-plot-bg: #1c1727; --neo-shadow-card: 0 12px 34px rgba(0, 0, 0, .35); --neo-shadow-lift: 0 -6px 24px rgba(0, 0, 0, .45); } /* ============================================================================ ARABIC Alexandria at the same nominal size runs optically larger and taller than Space Grotesk. The vertical rhythm set in English does not hold, so the Arabic anchors are set here rather than discovered during translation. ============================================================================ */ html[lang="ar"] { --neo-weight-regular: var(--neo-weight-light); --neo-leading-body: var(--neo-leading-loose); --neo-leading-heading: 1.4; --neo-tracking-tight: var(--neo-tracking-normal); --neo-tracking-wide: var(--neo-tracking-normal); /* Arabic sets larger; each step drops one notch to hold the same rhythm */ --type-page-title: clamp(2.25rem, 1.50rem + 3.08vw, 3.20rem); --type-section-title: clamp(1.70rem, 1.18rem + 2.13vw, 2.35rem); --type-subsection: clamp(1.35rem, 1.08rem + 1.11vw, 1.70rem); --type-card-title: clamp(1.08rem, 0.99rem + 0.37vw, 1.20rem); /* the extra line height needs matching vertical space */ --space-section: 86px; --space-block: 38px; --space-stack: 18px; } /* ============================================================================ ANCHORS Design at 1440, 768 and 390. Verify at 1920 and at 360. Breakpoints exist only where a layout genuinely cannot interpolate. ============================================================================ */ /* tablet anchor — 768. The dominant tablet viewport worldwide. */ @media (max-width: 1100px) { :root { --neo-gutter-desktop: var(--neo-gutter-tablet); --space-section: var(--neo-space-xl); } } /* mobile anchor — 390. Must also survive 360 with no horizontal scroll. */ @media (max-width: 640px) { :root { --neo-gutter-desktop: var(--neo-gutter-mobile); --space-section: var(--neo-space-xl); --header-height: var(--header-height-sm); --card-padding: var(--neo-space-sm); --portrait-max: 180px; --badge-size: 72px; } } /* color-scheme follows the chosen theme, not the operating system */ html[data-theme="light"]{color-scheme: light} html[data-theme="dark"] {color-scheme: dark}