/* ============================================================ APPROVED BY SAINI — VISUAL ENGINE DESIGN TOKENS Source: Document A (Master Visual Direction) §4–5. Palette family: obsidian base / graphite surfaces / cool white type / deep + electric blue / indigo-violet depth / sparing warm amber / soft metallic silver. Final values tuned during staging prototyping. ============================================================ */ :root { /* --- Base surfaces --- */ --abs-obsidian: #0a0c10; /* primary page base */ --abs-obsidian-2: #0e1117; /* raised base */ --abs-graphite: #161a22; /* panels / cards */ --abs-graphite-2: #1d232e; /* layered surfaces */ --abs-line: rgba(255, 255, 255, 0.08); --abs-line-strong: rgba(255, 255, 255, 0.16); /* --- Typography colours --- */ --abs-ink: #f4f6f9; /* cool white headline */ --abs-ink-soft: #c6ccd6; /* body on dark */ --abs-ink-dim: #8b93a1; /* captions, meta */ --abs-ink-dark: #10131a; /* text on light scenes */ /* --- Trust / technology blues --- */ --abs-blue-deep: #12305e; --abs-blue: #1e5eff; --abs-blue-electric: #3d8bff; --abs-blue-glow: rgba(61, 139, 255, 0.35); /* --- Atmospheric depth --- */ --abs-indigo: #2a2a72; --abs-violet: #4b3b8f; /* --- Warm counterpoint (sparing) --- */ --abs-amber: #f5a524; --abs-amber-deep: #d97e0f; --abs-amber-glow: rgba(245, 165, 36, 0.28); /* --- Metallic --- */ --abs-silver: #aeb6c2; --abs-metal-hi: #e6eaf0; /* --- Light scenes (blue-white / ivory) --- */ --abs-cloud: #eef3fb; --abs-cloud-2: #dde7f6; --abs-ivory: #f7f4ee; /* --- Type scale (fluid, editorial) --- */ --abs-font-display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --abs-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --abs-h1: clamp(2.6rem, 6.5vw, 5.2rem); --abs-h2: clamp(2rem, 4.2vw, 3.4rem); --abs-h3: clamp(1.4rem, 2.6vw, 2rem); --abs-body: clamp(1rem, 1.1vw, 1.125rem); --abs-lh-tight: 1.08; --abs-lh-body: 1.65; /* --- Spacing rhythm --- */ --abs-s1: 0.5rem; --abs-s2: 1rem; --abs-s3: 1.5rem; --abs-s4: 2.5rem; --abs-s5: 4rem; --abs-s6: 6.5rem; --abs-section: clamp(4rem, 9vw, 8.5rem); /* --- Geometry --- */ --abs-radius-s: 10px; --abs-radius: 16px; --abs-radius-l: 24px; --abs-radius-pill: 999px; /* --- Elevation / glow --- */ --abs-shadow-1: 0 4px 18px rgba(0, 0, 0, 0.35); --abs-shadow-2: 0 14px 44px rgba(0, 0, 0, 0.5); --abs-card-glow-blue: 0 0 0 1px var(--abs-line), 0 10px 40px rgba(30, 94, 255, 0.18); --abs-card-glow-amber: 0 0 0 1px var(--abs-line), 0 10px 40px rgba(245, 165, 36, 0.16); /* --- Motion system --- */ --abs-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* premium decel */ --abs-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --abs-ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --abs-dur-fast: 180ms; --abs-dur: 420ms; --abs-dur-slow: 900ms; --abs-dur-scene: 1400ms; /* --- Z-index registry --- */ --abs-z-bg: -1; --abs-z-content: 1; --abs-z-header: 900; --abs-z-transition: 1200; --abs-z-cursor: 1300; } /* Reduced motion: collapse all engine durations. Applied both by media query and by the .absve-force-reduced test class on . */ @media (prefers-reduced-motion: reduce) { :root { --abs-dur-fast: 0ms; --abs-dur: 0ms; --abs-dur-slow: 0ms; --abs-dur-scene: 0ms; } } body.absve-force-reduced { --abs-dur-fast: 0ms; --abs-dur: 0ms; --abs-dur-slow: 0ms; --abs-dur-scene: 0ms; }