/* ============================================================================ NAUTIKA UI/UX FRAMEWORK · themes.css Configurable color themes. Apply on or any wrapper: (default brand) (warm coral/orange) (teal/green) (dark mode) Only tokens are overridden — every component re-themes automatically. You can also build a custom theme by overriding the same variables. ========================================================================== */ /* OCEAN — default (explicit so toggling back works) ----------------------- */ [data-theme="ocean"]{ --nk-primary:#0099ff; --nk-primary-500:#0099ff; --nk-primary-600:#007ad1; --nk-primary-700:#005c9e; --nk-secondary:#ffdb4d; --nk-reef:#00d4c8; --nk-grad-ocean:linear-gradient(135deg,#0099ff 0%,#00d4c8 100%); --nk-shadow-primary:0 8px 24px -6px rgba(0,153,255,.42); } /* SUNSET — warm Andaman dusk ---------------------------------------------- */ [data-theme="sunset"]{ --nk-primary:#ff7a3d; --nk-primary-50:#fff1e8; --nk-primary-100:#ffdcc4; --nk-primary-200:#ffbe96; --nk-primary-300:#ff9f68; --nk-primary-400:#ff8a4d; --nk-primary-500:#ff7a3d; --nk-primary-600:#e85f25; --nk-primary-700:#bf4717; --nk-primary-800:#8a300c; --nk-primary-900:#5c1f06; --nk-secondary:#ffd24d; --nk-info:#ff9f68; --nk-reef:#ffb84d; --nk-grad-ocean:linear-gradient(135deg,#ff7a3d 0%,#ff4d6d 100%); --nk-grad-deep:linear-gradient(168deg,#2b0f04 0%,#5c1f06 55%,#bf4717 110%); --nk-grad-hero:linear-gradient(172deg,#2b0f04 0%,#6b2508 48%,#c94e1a 88%,#ff7a3d 135%); --nk-abyss:#230c03; --nk-abyss-2:#381506; --nk-abyss-3:#54220a; --nk-deck-line:rgba(255,190,150,.18); --nk-deck-text:#f8e4d8; --nk-deck-muted:#c29a85; --nk-shadow-primary:0 8px 24px -6px rgba(255,122,61,.45); --nk-bg:#fdf8f4; } /* LAGOON — turquoise reef ------------------------------------------------- */ [data-theme="lagoon"]{ --nk-primary:#0bc3a8; --nk-primary-50:#e2fbf5; --nk-primary-100:#b8f3e7; --nk-primary-200:#7fe7d4; --nk-primary-300:#43d8bd; --nk-primary-400:#1fccae; --nk-primary-500:#0bc3a8; --nk-primary-600:#079e88; --nk-primary-700:#067a6a; --nk-primary-800:#04564b; --nk-primary-900:#023831; --nk-secondary:#ffe066; --nk-info:#2dd4bf; --nk-reef:#0099ff; --nk-grad-ocean:linear-gradient(135deg,#0bc3a8 0%,#0099ff 100%); --nk-grad-hero:linear-gradient(172deg,#021b17 0%,#04382f 48%,#067a6a 88%,#0bc3a8 135%); --nk-abyss:#02140f; --nk-abyss-2:#04271f; --nk-abyss-3:#073d31; --nk-deck-line:rgba(127,231,212,.16); --nk-deck-text:#d8f4ec; --nk-deck-muted:#7fae9f; --nk-shadow-primary:0 8px 24px -6px rgba(11,195,168,.4); --nk-bg:#f4fbf9; } /* DUSK — dark mode -------------------------------------------------------- */ [data-theme="dusk"]{ --nk-primary:#38bdf8; --nk-primary-500:#38bdf8; --nk-primary-600:#0ea5e9; --nk-primary-700:#7dd3fc; --nk-primary-50:#11283a; --nk-primary-100:#15324a; --nk-primary-200:#1d4260; --nk-secondary:#ffdb4d; --nk-white:#0d1b27; --nk-ink:#e8f1f8; --nk-ink-soft:#b3c7d6; --nk-muted:#7e95a6; --nk-faint:#5a7080; --nk-line:#1e3346; --nk-line-strong:#2c4459; --nk-surface:#10222f; --nk-surface-2:#162b3a; --nk-bg:#0a1822; --nk-overlay:rgba(2,8,14,.7); --nk-abyss:#050e16; --nk-abyss-2:#0c1d2b; --nk-abyss-3:#14293a; --nk-success-50:#0f2e26; --nk-warning-50:#33260f; --nk-error-50:#33181a; --nk-grad-deep:linear-gradient(168deg,#0a1822 0%,#10222f 55%,#16384f 100%); --nk-grad-hero:linear-gradient(172deg,#050e16 0%,#0c1d2b 48%,#14395a 88%,#38bdf8 160%); --nk-shadow-xs:0 1px 2px rgba(0,0,0,.35); --nk-shadow-sm:0 2px 8px rgba(0,0,0,.4); --nk-shadow:0 8px 24px rgba(0,0,0,.45); --nk-shadow-lg:0 18px 48px rgba(0,0,0,.55); --nk-shadow-xl:0 30px 80px rgba(0,0,0,.6); --nk-focus-ring:0 0 0 4px #11283a; } [data-theme="dusk"] .nk-navbar{background:rgba(13,27,39,.8)} [data-theme="dusk"] .nk-glass{background:rgba(16,34,47,.6);border-color:rgba(255,255,255,.08)} [data-theme="dusk"] .nk-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237e95a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")} [data-theme="dusk"] .nk-route-time{color:#e8f1f8} [data-theme="dusk"] .nk-ticket{--nk-ticket-bg:var(--nk-bg)} /* Density modifier — compact spacing for data-heavy admin screens -------- */ [data-density="compact"]{ --nk-gutter:1rem; } [data-density="compact"] .nk-card-body{padding:1.1rem} [data-density="compact"] .nk-table tbody td{padding:.55rem .8rem}