/* Loabi — Maldives design tokens * Drop this in (or import it first) and reference the custom * properties everywhere instead of hardcoding hex values. Colors are * tuned for Maldivian sites: lagoon water, coral sunsets, the national * flag, and warm island sand. */ :root { /* ---- Lagoon / ocean (turquoise → deep teal) ---- */ --loabi-lagoon-50: #ecfeff; --loabi-lagoon-100: #cff5fb; --loabi-lagoon-300: #67d3e8; --loabi-lagoon: #3aa1c4; /* shallow lagoon turquoise */ --loabi-lagoon-600: #0e7490; /* deep lagoon */ --loabi-deep-sea: #0c2438; /* near-black ocean for text on light */ --loabi-teal-900: #0c4a3f; /* deep tropical teal (Dhivehi UI) */ /* ---- Coral / sunset ---- */ --loabi-coral: #fb7185; --loabi-coral-600: #f43f5e; --loabi-sunset: #f59e0b; /* warm sunset amber */ --loabi-gold: #fcd34d; /* emblem / accent gold */ /* ---- National flag ---- */ --loabi-flag-red: #d21034; --loabi-flag-green: #007e3a; --loabi-flag-white: #ffffff; /* ---- Sand / surfaces ---- */ --loabi-sand-50: #fdfaf3; /* page background */ --loabi-sand-100: #f7f1e3; --loabi-sand-200: #e7e2d3; /* hairline borders */ --loabi-shell: #fffdf8; /* ---- Brand accents (Loabi) ---- */ --loabi-brand: var(--loabi-lagoon-600); --loabi-brand-accent: var(--loabi-coral); --loabi-on-brand: #ffffff; --loabi-ink: #1a1611; /* primary text */ --loabi-ink-muted: #57534e; /* ---- Semantic aliases ---- */ --loabi-bg: var(--loabi-sand-50); --loabi-surface: var(--loabi-shell); --loabi-border: var(--loabi-sand-200); --loabi-text: var(--loabi-ink); --loabi-text-muted: var(--loabi-ink-muted); --loabi-primary: var(--loabi-brand); --loabi-accent: var(--loabi-brand-accent); /* ---- Gradients ---- */ --loabi-gradient-ocean: linear-gradient(180deg, #fde6c1 0%, #ffd0bd 25%, #ffb3a7 45%, #a0d8e8 60%, #3aa1c4 100%); --loabi-gradient-lagoon: linear-gradient(135deg, var(--loabi-lagoon-600), var(--loabi-teal-900)); --loabi-gradient-sunset: linear-gradient(135deg, var(--loabi-sunset), var(--loabi-coral)); --loabi-gradient-gold: linear-gradient(135deg, var(--loabi-gold), var(--loabi-sunset)); /* ---- Radius / shadow / spacing ---- */ --loabi-radius-sm: 8px; --loabi-radius: 12px; --loabi-radius-lg: 16px; --loabi-radius-pill: 9999px; --loabi-shadow: 0 10px 30px -12px rgba(12, 36, 56, 0.25); --loabi-shadow-lg: 0 20px 50px -10px rgba(12, 36, 56, 0.30); }