/* ============================================= SUTRA AI — DESIGN TOKENS v1.0 Import this file on EVERY page. No exceptions. The meeting AI India built for the world. Liquid Glass · 3D Physics · Sarvam Sovereignty ============================================= */ :root { /* ── BACKGROUNDS ───────────────────────────── */ --bg-void: #03030a; /* Deepest space — body background */ --bg-deep: #06060f; /* Section backgrounds */ --bg-surface: #0c0c1a; /* Raised surface areas */ --bg-elevated: #121228; /* Cards, panels before glass */ /* ── LIQUID GLASS SYSTEM ───────────────────── */ --glass-base: rgba(255, 255, 255, 0.03); --glass-hover: rgba(255, 255, 255, 0.06); --glass-active: rgba(255, 255, 255, 0.09); --glass-blur: blur(28px) saturate(160%) brightness(1.1); --glass-border: rgba(255, 255, 255, 0.07); --glass-border-hover: rgba(255, 255, 255, 0.14); --glass-shine: linear-gradient( 135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.01) 40%, rgba(255,255,255,0.05) 100% ); --glass-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset, 0 -1px 0 rgba(0,0,0,0.3) inset; --glass-shadow-hover: 0 16px 48px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.10) inset; --glass-radius: 20px; --glass-radius-sm: 12px; --glass-radius-lg: 28px; /* ── INDIA IDENTITY PALETTE ────────────────── */ --saffron: #FF9933; /* India flag saffron */ --saffron-dim: rgba(255, 153, 51, 0.15); --saffron-glow: rgba(255, 153, 51, 0.25); --saffron-border: rgba(255, 153, 51, 0.20); --india-white: #F5F5F5; /* India flag white */ --india-green: #138808; /* India flag green */ --chakra-blue: #000080; /* Ashoka Chakra */ --chakra-light: rgba(0, 0, 128, 0.15); --gold: #C9961A; /* Indian gold (muted) */ --gold-bright: #FFD700; /* Indian gold (bright) */ --gold-glow: rgba(201, 150, 26, 0.20); /* ── TECH ACCENT PALETTE ────────────────────── */ --accent-cyan: #00CFFF; /* AI/live state glow */ --accent-cyan-dim: rgba(0, 207, 255, 0.12); --accent-violet: #7B5CEA; /* Secondary tech accent */ --accent-violet-dim:rgba(123, 92, 234, 0.12); --accent-green: #00E87A; /* Success / live / active */ --accent-green-dim: rgba(0, 232, 122, 0.12); --accent-red: #FF4E6A; /* Error / danger */ /* ── TEXT ───────────────────────────────────── */ --text-primary: #EEEEF5; --text-secondary: rgba(238, 238, 245, 0.65); --text-muted: rgba(238, 238, 245, 0.35); --text-disabled: rgba(238, 238, 245, 0.20); --text-saffron: rgba(255, 153, 51, 0.90); --text-gold: rgba(201, 150, 26, 0.90); /* ── INTERACTIVE STATES ─────────────────────── */ --focus-ring: 0 0 0 3px rgba(255, 153, 51, 0.40); --hover-lift: translateY(-4px) scale(1.01); --press-sink: translateY(1px) scale(0.99); /* ── GRADIENTS ──────────────────────────────── */ --gradient-saffron: linear-gradient(135deg, #FF9933 0%, #E07820 100%); --gradient-saffron-glow: linear-gradient(135deg, rgba(255,153,51,0.9) 0%, rgba(224,120,32,0.9) 100%); --gradient-dark: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-deep) 100%); --gradient-radial-saffron: radial-gradient( ellipse 60% 50% at 30% 40%, rgba(255,153,51,0.07) 0%, transparent 70% ); --gradient-radial-cyan: radial-gradient( ellipse 50% 60% at 70% 60%, rgba(0,207,255,0.05) 0%, transparent 70% ); /* ── 3D / PERSPECTIVE ───────────────────────── */ --perspective: 1000px; --perspective-near: 600px; --perspective-far: 1600px; --depth-1: translateZ(60px); --depth-2: translateZ(30px); --depth-3: translateZ(10px); --depth-neg-1: translateZ(-20px); /* ── MOTION ─────────────────────────────────── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 200ms; --duration-base: 400ms; --duration-slow: 700ms; --duration-crawl: 1200ms; /* ── SPACING ─────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ── LAYOUT ──────────────────────────────────── */ --max-width: 1280px; --nav-height: 72px; --sidebar-width: 260px; /* Dashboard sidebar */ } /* ══════════════════════════════════════════════════════ LIGHT MODE OVERRIDES — Rich Liquid Glass Light Applied when body[data-theme="light"] ══════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── BACKGROUNDS ─────────────────────────────────── */ --bg-void: #FDFAF5; /* Warm white — base */ --bg-deep: #F7F2E8; /* Cream — section alternate */ --bg-surface: #F0EAD8; /* Slightly deeper cream */ --bg-elevated: #FFFFFF; /* Pure white — raised elements */ /* ── LIQUID GLASS ON LIGHT ──────────────────────── */ --glass-base: rgba(255, 255, 255, 0.65); --glass-hover: rgba(255, 255, 255, 0.80); --glass-active: rgba(255, 255, 255, 0.90); --glass-blur: blur(20px) saturate(150%); --glass-border: rgba(180, 140, 80, 0.15); --glass-border-hover: rgba(180, 140, 80, 0.30); --glass-shine: linear-gradient( 135deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.70) 100% ); --glass-shadow: 0 4px 24px rgba(120, 80, 20, 0.08), 0 1px 0 rgba(255,255,255,0.90) inset, 0 -1px 0 rgba(120,80,20,0.06) inset; --glass-shadow-hover: 0 12px 48px rgba(120, 80, 20, 0.15), 0 1px 0 rgba(255,255,255,1) inset; /* ── TEXT ON LIGHT ────────────────────────────────── */ --text-primary: #1A1208; --text-secondary: rgba(26, 18, 8, 0.65); --text-muted: rgba(26, 18, 8, 0.38); --text-disabled: rgba(26, 18, 8, 0.20); --text-saffron: #C06010; --text-gold: #9A7010; /* ── INDIA IDENTITY ON LIGHT ─────────────────────── */ --saffron: #E07820; --saffron-dim: rgba(224, 120, 32, 0.10); --saffron-glow: rgba(224, 120, 32, 0.20); --saffron-border: rgba(224, 120, 32, 0.25); --gradient-saffron: linear-gradient(135deg, #E07820 0%, #C05C10 100%); /* ── TECH ACCENTS ON LIGHT ────────────────────────── */ --accent-cyan: #0080AA; --accent-cyan-dim: rgba(0, 128, 170, 0.10); --accent-violet: #4f46e5; --accent-green: #00803A; --accent-green-dim:rgba(0, 128, 58, 0.10); --accent-red: #dc2626; /* ── GLASS PILL VARIANTS ON LIGHT ──────────────────── */ --pill-bg: rgba(255, 255, 255, 0.70); --pill-border: rgba(180, 140, 80, 0.20); } /* ── ACCESSIBILITY: Respect reduced-motion preference ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── GLOBAL RESETS ────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { height: 100%; } body { background: var(--bg-void); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img, video, canvas, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } /* ── UTILITY: Container ── */ .container { width: 100%; max-width: var(--max-width); margin-left: auto; margin-right: auto; padding-left: var(--space-6); padding-right: var(--space-6); } @media (max-width: 768px) { .container { padding-left: var(--space-4); padding-right: var(--space-4); } } /* ── UTILITY: Section spacing ── */ .section { padding-top: var(--space-24); padding-bottom: var(--space-24); } @media (max-width: 768px) { .section { padding-top: var(--space-16); padding-bottom: var(--space-16); } } /* ── UTILITY: Screen reader only ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── UTILITY: Saffron gradient text ── */ .text-saffron-gradient { background: var(--gradient-saffron); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }