/* ============================================================ CricoSoft — Design Tokens Load order: [1 tokens] > 2 base > 3 components > 4 mockups > 5 sections Single source of truth. No raw hex values anywhere else. Every token is namespaced `--cricosoft-*`. The handful of un-prefixed custom properties elsewhere in the project (--w, --h, --n, --i, --p, --fill, --mx, --my, --reveal-delay, --flow) are deliberately NOT tokens: they are per-instance parameters passed in from a style attribute or from JavaScript. See README.md. THEMING Both themes live in one declaration each via light-dark(). `color-scheme` decides which half resolves, so switching themes is one attribute on — and it also fixes native form controls, scrollbars and caret colours for free. (no attribute) follow the operating system [data-theme="light"] force light [data-theme="dark"] force dark PALETTE RATIONALE — "Iris & Ember" CricoSoft is the parent brand above BackTheme (azure #00A3FF) and CricoScore (cricket green). Both of those own the blue-green arc, so the parent takes iris: far enough from azure (~50 degrees of hue) to never be confused with it, and platform-level rather than product-level. Ember is the temperature change — rationed to the stats band and a few emphasis marks, because nine sections of violet alone go cold. ============================================================ */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ---------- Brand palette — Iris (theme-independent) ---------- */ --cricosoft-brand-100: #E6E2FF; --cricosoft-brand-200: #CDC5FF; --cricosoft-brand-300: #AFA2FF; --cricosoft-brand-400: #8B78FF; --cricosoft-brand-500: #6B52FF; /* primary — fills, borders, marks */ --cricosoft-brand-600: #5539E8; --cricosoft-brand-700: #452DC2; --cricosoft-brand-800: #37249B; --cricosoft-brand-900: #2A1B78; /* ---------- Accent palette — Ember (theme-independent) ---------- CONTRAST RULE: ember NEVER sets small text on a light background. --cricosoft-accent-500 on white is ~2.1:1 and fails WCAG AA badly. It is for large numerals, rules, fills and icon glyphs only. For ember-coloured type, use --cricosoft-accent-ink below. */ --cricosoft-accent-300: #FFD08A; --cricosoft-accent-400: #FFBB57; --cricosoft-accent-500: #FFA023; --cricosoft-accent-600: #E0850A; --cricosoft-accent-700: #A65F00; /* ---------- Surfaces ---------- */ --cricosoft-bg: light-dark(#FFFFFF, #08080D); --cricosoft-bg-subtle: light-dark(#F7F7FB, #0B0B12); --cricosoft-surface-1: light-dark(#FFFFFF, #101018); --cricosoft-surface-2: light-dark(#F6F6FA, #16161F); --cricosoft-surface-3: light-dark(#EFEFF5, #1D1D28); --cricosoft-surface-4: light-dark(#E3E3EC, #262633); /* ---------- Lines ---------- */ --cricosoft-line: light-dark(rgba(12, 12, 24, .10), rgba(255, 255, 255, .07)); --cricosoft-line-strong: light-dark(rgba(12, 12, 24, .17), rgba(255, 255, 255, .13)); --cricosoft-line-brand: light-dark(rgba(69, 45, 194, .30), rgba(107, 82, 255, .34)); /* ---------- Foreground ---------- */ --cricosoft-fg: light-dark(#0B0B14, #EDEDF5); --cricosoft-fg-muted: light-dark(#545466, #9A9AAE); --cricosoft-fg-subtle: light-dark(#6B6B7E, #7C7C90); --cricosoft-fg-inverse: light-dark(#FFFFFF, #08080D); /* Brand colour that is safe to set type in, on the page background. Light uses 700 because 500 on white is 4.90:1 — it passes, but with no margin, and it fails as soon as anything tints the background. */ --cricosoft-brand-ink: light-dark(var(--cricosoft-brand-700), var(--cricosoft-brand-300)); --cricosoft-accent-ink: light-dark(var(--cricosoft-accent-700), var(--cricosoft-accent-400)); /* ---------- Brand washes ---------- */ --cricosoft-brand-wash: light-dark(rgba(107, 82, 255, .07), rgba(107, 82, 255, .13)); --cricosoft-brand-wash-2: light-dark(rgba(107, 82, 255, .13), rgba(107, 82, 255, .20)); --cricosoft-accent-wash: light-dark(rgba(255, 160, 35, .11), rgba(255, 160, 35, .15)); /* ---------- Focus ---------- */ --cricosoft-focus: light-dark(var(--cricosoft-brand-600), var(--cricosoft-brand-300)); /* ---------- Type families ---------- Three families, six weights, one request. A mono face was not worth a fourth family — eyebrows use Inter with tracking instead. */ --cricosoft-font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cricosoft-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --cricosoft-font-quote: "Newsreader", Georgia, "Times New Roman", serif; /* ---------- Fluid type scale ---------- clamp() on every step, so 320px and 2560px are both deliberate and there is never a jump at a breakpoint. */ --cricosoft-text-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); --cricosoft-text-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem); --cricosoft-text-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem); --cricosoft-text-md: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); --cricosoft-text-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem); --cricosoft-text-xl: clamp(1.3125rem, 1.20rem + 0.55vw, 1.625rem); --cricosoft-text-2xl: clamp(1.5rem, 1.32rem + 0.90vw, 2.125rem); --cricosoft-text-3xl: clamp(1.875rem, 1.58rem + 1.45vw, 2.875rem); --cricosoft-text-4xl: clamp(2.25rem, 1.78rem + 2.35vw, 3.75rem); --cricosoft-text-5xl: clamp(2.5rem, 1.62rem + 4.40vw, 5rem); --cricosoft-text-6xl: clamp(2.75rem, 1.30rem + 7.25vw, 6.5rem); /* ---------- Spacing ---------- */ --cricosoft-space-1: 0.25rem; --cricosoft-space-2: 0.5rem; --cricosoft-space-3: 0.75rem; --cricosoft-space-4: 1rem; --cricosoft-space-5: 1.25rem; --cricosoft-space-6: 1.5rem; --cricosoft-space-8: 2rem; --cricosoft-space-10: 2.5rem; --cricosoft-space-12: 3rem; --cricosoft-space-16: 4rem; --cricosoft-space-20: 5rem; --cricosoft-space-24: 6rem; /* Section rhythm scales with the viewport, so a phone is not scrolling through desktop-sized gaps. */ --cricosoft-section-y: clamp(3.5rem, 2.2rem + 6.5vw, 8rem); --cricosoft-section-y-tight: clamp(2.5rem, 1.7rem + 4.0vw, 5rem); /* ---------- Layout ---------- */ --cricosoft-width: 1200px; --cricosoft-width-wide: 1400px; --cricosoft-width-narrow: 780px; --cricosoft-width-prose: 68ch; --cricosoft-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem); /* ---------- Radii ---------- */ --cricosoft-radius-xs: 6px; --cricosoft-radius-sm: 10px; --cricosoft-radius: 14px; --cricosoft-radius-lg: 20px; --cricosoft-radius-xl: 28px; --cricosoft-radius-full: 999px; /* ---------- Elevation ---------- */ --cricosoft-shadow-sm: light-dark( 0 1px 2px rgba(12, 12, 24, .06), 0 1px 2px rgba(0, 0, 0, .45)); --cricosoft-shadow: light-dark( 0 2px 4px rgba(12, 12, 24, .05), 0 8px 24px rgba(12, 12, 24, .07), 0 2px 4px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .40)); --cricosoft-shadow-lg: light-dark( 0 4px 8px rgba(12, 12, 24, .05), 0 24px 56px rgba(12, 12, 24, .11), 0 4px 8px rgba(0, 0, 0, .35), 0 24px 56px rgba(0, 0, 0, .50)); --cricosoft-shadow-brand: light-dark( 0 8px 28px rgba(107, 82, 255, .26), 0 8px 28px rgba(107, 82, 255, .34)); /* ---------- Motion ---------- One easing vocabulary. `--ease-out` for things arriving, `--ease-spring` for things the user pressed, `--ease` for everything else. */ --cricosoft-ease: cubic-bezier(.4, 0, .2, 1); --cricosoft-ease-out: cubic-bezier(.16, 1, .3, 1); --cricosoft-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --cricosoft-dur-fast: 140ms; --cricosoft-dur: 240ms; --cricosoft-dur-slow: 420ms; --cricosoft-dur-xslow: 900ms; /* ---------- Z-index ladder ---------- Every stacking decision in the project comes from here. */ --cricosoft-z-base: 1; --cricosoft-z-raised: 10; --cricosoft-z-sticky: 100; --cricosoft-z-header: 200; --cricosoft-z-scrim: 300; --cricosoft-z-drawer: 400; --cricosoft-z-toast: 500; --cricosoft-z-skip-link: 600; } /* Honour the OS setting, but only when the user has not chosen for themselves. The inline script in sets data-theme before first paint, so there is never a flash of the wrong theme. */ @media (prefers-reduced-motion: reduce) { :root { --cricosoft-dur-fast: 1ms; --cricosoft-dur: 1ms; --cricosoft-dur-slow: 1ms; --cricosoft-dur-xslow: 1ms; } }