/* ========================================================================= Riya Connect — LAYER 1: BRAND TOKENS ------------------------------------------------------------------------- The Riya Connect brand theme. Load it FIRST, always: Layer 1 Layer 2 Layer 3 THIS FILE IS SHARED AND IS NOT EDITED BY A PAGE. It holds the brand's own constants — the red, the navy, the gold, the two typefaces, the neutral ramp, the base radii and the base motion primitives — and it paints nothing. A page that needs a different value names a NEW semantic token in Layer 2 and points it at one of these; it never redefines a `--brand-*`, `--n-*`, `--font-*`, `--r-*` or `--fw-*` token, because those are what every Riya Connect surface has in common. Typeface roles (fixed — do not substitute): --font-sans Inter headings, buttons, numerals, every UI string --font-body Poppins body copy, the default --font-mono JetBrains Mono tabular figures inside the product preview Why the palette looks the way it does: Riya red is the only colour that ever means "act on this". Navy carries the words. Gold is the premium note, used on one eyebrow and a handful of glyphs, never on a control — a gold button would read as a second call to action and there is only ever one. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ======================================================================= BRAND — Riya red --brand-red is the fill. --brand-red-deep is its hover/active and is also the only red allowed on small text over white, where the fill red is too light to clear AA. ===================================================================== */ --brand-red: #dc143c; --brand-red-deep: #b30e30; --brand-red-tint: #fff1f3; /* pill / icon-disc ground */ --brand-red-wash: #fff6f8; /* the softest red ground on the page */ --brand-red-line: #ffe1e7; /* hairline on a red-tinted block */ /* Every red glow, ring and shadow is an rgba() of the brand red, so re-theming --brand-red re-themes all of them with it. */ --brand-red-a10: rgba(220, 20, 60, 0.10); --brand-red-a14: rgba(220, 20, 60, 0.14); --brand-red-a26: rgba(220, 20, 60, 0.26); /* ======================================================================= BRAND — deep indigo (the ink) and warm gold (the premium accent) ===================================================================== */ --brand-navy: #1c184a; --brand-navy-a06: rgba(28, 24, 74, 0.06); --brand-navy-a10: rgba(28, 24, 74, 0.10); --brand-gold: #a88a5c; /* glyph gold — AA on white */ --brand-gold-soft: #e4c98a; /* the gold hairline on the hero eyebrow */ --brand-gold-ink: #8b7148; /* gold text small enough to need the depth */ --brand-gold-tint: #faf5eb; /* the hero eyebrow's ground */ --brand-gold-a28: rgba(228, 201, 138, 0.28); /* ======================================================================= NEUTRALS — a warm ramp, sampled from the approved design Warm, not grey: the whole page sits on paper-white, and a cool grey hairline against it reads as a rendering artefact. ===================================================================== */ --n-white: #ffffff; --n-paper: #fcfbf9; /* the faintest off-white — panel grounds */ --n-mist: #f7f6f3; /* quiet card ground (the technology cards) */ --n-sand: #f4f1ec; /* icon tiles, quiet pills, nav hover */ --n-line-soft: #f1ede6; /* an inner divider inside a card */ --n-line: #eae6de; /* THE hairline. If in doubt, this one. */ --n-line-mid: #e4dfd6; /* dashed decorative routes */ --n-line-firm: #d9d5ce; /* a control border, a vertical rule */ --n-line-hover: #c6c1b7; --n-ink-soft: #b5b0a7; /* decorative dots, placeholder text */ --n-ink-mute: #807b72; /* captions, field hints, the smallest labels */ --n-ink-body: #4e4a44; /* body copy */ /* ======================================================================= STATE — semantic, and deliberately not brand-derived. A state colour that moves when the brand moves stops being a state. ===================================================================== */ --st-ok: #2e7d5b; --st-ok-tint: #e8f6ef; --st-ok-line: #a9d9c2; --st-error: #c22233; --st-error-tint:#fdf2f3; /* ======================================================================= TYPOGRAPHY — families and weights ===================================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Inter 800 IS loaded above — safe to use */ --lh-display: 1.06; --lh-tight: 1.16; --lh-snug: 1.3; --lh-normal: 1.5; --lh-body: 1.65; --lh-relaxed: 1.8; --ls-display: -0.04em; --ls-tighter: -0.03em; --ls-tight: -0.015em; --ls-caps: 0.12em; --ls-cta: 0.06em; /* ======================================================================= RADII Rounded but professional. Nothing on a Riya Connect surface is rounder than --r-xl except a pill or a disc, both of which are shapes rather than corners. ===================================================================== */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px; --r-3xl: 22px; --r-pill: 999px; --r-circle: 50%; /* ======================================================================= MOTION — the primitives Layer 2 names the *roles* (--dur-hover, --dur-reveal); these are the raw values the roles are built from, so retiming the brand is one edit here rather than forty in the component sheet. ===================================================================== */ --t-quick: 0.18s; --t-fast: 0.24s; --t-mid: 0.35s; --t-slow: 0.5s; --t-reveal: 0.7s; --t-enter: 0.9s; /* --ease-out is the house easing: no overshoot, hard deceleration, so motion reads as settling rather than sliding. --ease-inout is for anything that travels both ways (a menu opening and closing). */ --ease: ease; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* ======================================================================= FOCUS ===================================================================== */ --focus-width: 2px; --focus-offset: 2px; --focus-color: var(--brand-red); }